import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';

interface ExportFormatsSectionProps {
  exportFormats: string[];
  onExportFormatsChange: (formats: string[]) => void;
}

const availableFormats = ['CSV', 'Excel', 'PDF', 'JSON'];

export function ExportFormatsSection({
  exportFormats,
  onExportFormatsChange
}: ExportFormatsSectionProps) {
  const handleFormatToggle = (format: string, checked: boolean) => {
    if (checked) {
      onExportFormatsChange([...exportFormats, format]);
    } else {
      onExportFormatsChange(exportFormats.filter(f => f !== format));
    }
  };

  return (
    <div className="space-y-2">
      <Label>Allowed Export Formats</Label>
      <div className="grid grid-cols-3 gap-2">
        {availableFormats.map((format) => (
          <div
            key={format}
            className="flex items-center space-x-2 p-2 bg-muted/50 rounded"
          >
            <Checkbox
              id={`export-${format}`}
              checked={exportFormats.includes(format)}
              onCheckedChange={(checked) =>
                handleFormatToggle(format, checked as boolean)
              }
            />
            <Label
              htmlFor={`export-${format}`}
              className="text-sm cursor-pointer"
            >
              {format}
            </Label>
          </div>
        ))}
      </div>
    </div>
  );
}

