// src/pages/admin/components/AnonymousUserBanner.tsx
import React from 'react';
import { InformationCircleIcon } from '../../../components/icons/InformationCircleIcon';

interface AnonymousUserBannerProps {
  /**
   * A callback function to open the login/signup modal.
   */
  onOpenProfile: () => void;
}

/**
 * A banner displayed to anonymous users to encourage them to sign up or log in.
 */
export const AnonymousUserBanner: React.FC<AnonymousUserBannerProps> = ({ onOpenProfile }) => {
  return (
    <div className="bg-blue-100 dark:bg-blue-900/30 border-l-4 border-blue-500 text-blue-700 dark:text-blue-300 p-4 rounded-r-lg" role="alert">
      <div className="flex items-center">
        <div className="py-1">
          <InformationCircleIcon className="h-6 w-6 text-blue-500 mr-4" />
        </div>
        <div>
          <p className="font-bold">You're viewing as a guest.</p>
          <p className="text-sm">To save your flyers, create a watchlist, and access more features, please <button onClick={onOpenProfile} className="font-bold underline hover:text-blue-600 dark:hover:text-blue-200">sign up or log in</button>.</p>
        </div>
      </div>
    </div>
  );
};
