import { AlertCircle } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { ShowNewItemsButton } from './show-new-items-button';

interface NewItemsAlertProps {
  count: number;
  onShowNewItems: () => void;
  visible?: boolean;
}

export const NewItemsAlert = ({ count, onShowNewItems, visible = true }: NewItemsAlertProps) => {
  if (!visible || count === 0) return null;

  return (
    <div className="sticky top-0 z-10 animate-in fade-in-50">
      <Alert className="border-primary/50 bg-primary/5">
        <AlertCircle className="h-4 w-4 animate-pulse" />
        <AlertTitle>New Items Available</AlertTitle>
        <AlertDescription className="flex items-center justify-between">
          <span>{count} new {count === 1 ? 'submission' : 'submissions'} pending review</span>
          <ShowNewItemsButton
            count={count}
            onShow={onShowNewItems}
          />
        </AlertDescription>
      </Alert>
    </div>
  );
};