"use client";

import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { OfferMacro, OfferMicro } from "@/db/schema";

interface OfferSelectorProps {
  macros: (OfferMacro & { micros: OfferMicro[] })[];
  value: string;
  onValueChange: (value: string) => void;
}

export function OfferSelector({ macros, value, onValueChange }: OfferSelectorProps) {
  return (
    <div className="space-y-2">
      <Label htmlFor="offer">Offerta*</Label>
      <Select value={value} onValueChange={onValueChange}>
        <SelectTrigger id="offer">
          <SelectValue placeholder="Seleziona un'offerta" />
        </SelectTrigger>
        <SelectContent>
          {macros.map((macro) => (
            <SelectGroup key={macro.id}>
              <SelectLabel className="text-xs font-semibold text-gray-600">
                {macro.public_name}
              </SelectLabel>
              {macro.micros.map((micro) => (
                <SelectItem key={micro.id} value={micro.id}>
                  {micro.public_name}
                </SelectItem>
              ))}
            </SelectGroup>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}
