// src/components/FlyerCountDisplay.tsx
import React from 'react';
import { ErrorDisplay } from './ErrorDisplay';
import { useFlyers } from '../hooks/useFlyers';

/**
 * A simple component that displays the number of flyers available.
 * It demonstrates consuming the useFlyers hook for its state.
 */
export const FlyerCountDisplay: React.FC = () => {
  const { flyers, isLoadingFlyers: isLoading, flyersError: error } = useFlyers();

  if (isLoading) {
    return <div data-testid="loading-spinner">Loading...</div>;
  }

  if (error) {
    return <ErrorDisplay message={error.message} />;
  }

  return <div data-testid="flyer-count">Number of flyers: {flyers.length}</div>;
};