import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { useState } from "react";

interface IconDownloadBarProps {
  selectedCount: number;
  onDownload: (format: string) => void;
  onClear: () => void;
}

const FORMAT_OPTIONS = [
  { value: "svg", label: "SVG" },
  { value: "png-16", label: "PNG 16" },
  { value: "png-32", label: "PNG 32" },
  { value: "png-64", label: "PNG 64" },
];

export function IconDownloadBar({ selectedCount, onDownload, onClear }: IconDownloadBarProps) {
  const [format, setFormat] = useState("svg");

  if (selectedCount === 0) return null;

  return (
    <div className="sticky bottom-0 z-10 flex items-center gap-3 rounded-t-md border border-border bg-card px-4 py-3 shadow-lg">
      <Button
        type="button"
        onClick={() => onDownload(format)}
        className="shrink-0"
      >
        Download selected ({selectedCount})
      </Button>

      <Select value={format} onValueChange={setFormat}>
        <SelectTrigger className="w-32">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {FORMAT_OPTIONS.map((opt) => (
            <SelectItem key={opt.value} value={opt.value}>
              {opt.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <button
        type="button"
        onClick={onClear}
        className="ml-auto text-sm text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2"
      >
        Clear selection
      </button>
    </div>
  );
}
