thrilltrack-explorer/src/components/moderation/NewItemsAlert.tsx

import { AlertCircle, RefreshCw } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/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>
          <Button
            variant="default"
            size="sm"
            onClick={onShowNewItems}
            className="ml-4"
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            Show New Items
          </Button>
        </AlertDescription>
      </Alert>
    </div>
  );
};