import { AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { UnassignedImage, Product } from "../types";
import { UnassignedImageItem } from "./UnassignedImagesSection/UnassignedImageItem";

interface UnassignedImagesSectionProps {
  showUnassigned: boolean;
  unassignedImages: UnassignedImage[];
  data: Product[];
  onHide: () => void;
  onAssign: (imageIndex: number, productIndex: number) => void;
  onRemove: (index: number) => void;
}

export const UnassignedImagesSection = ({
  showUnassigned,
  unassignedImages,
  data,
  onHide,
  onAssign,
  onRemove
}: UnassignedImagesSectionProps) => {
  if (!showUnassigned || unassignedImages.length === 0) return null;
  
  return (
    <div className="mb-4 px-4">
      <div className="bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-md p-3">
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center gap-2">
            <AlertCircle className="h-5 w-5 text-amber-500" />
            <h3 className="text-sm font-medium text-amber-700 dark:text-amber-400">
              Unassigned Images ({unassignedImages.length})
            </h3>
          </div>
          <Button 
            variant="ghost" 
            size="sm" 
            onClick={onHide}
            className="h-8 text-muted-foreground"
          >
            Hide
          </Button>
        </div>
        
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
          {unassignedImages.map((image, index) => (
            <UnassignedImageItem 
              key={index} 
              image={image} 
              index={index}
              data={data}
              onAssign={onAssign}
              onRemove={onRemove}
            />
          ))}
        </div>
      </div>
    </div>
  );
}; 