import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useFormContext, Controller } from "react-hook-form";
import { useTranslations } from "next-intl";
import { Package } from "@/types/package";

interface PackageSelectorProps {
  packages: Package[];
}

export default function PackageSelector({ packages }: PackageSelectorProps) {
  const t = useTranslations("SubscribePage");
  const {
    control,
    formState: { errors },
  } = useFormContext();

  return (
    <div className="flex flex-col gap-1">
      <div className="flex gap-2 items-center">
        <h4 className="text-[12px] sm:text-[14px] md:text-[16px] lg:text-[18px] font-bold">
          {t("packageName")} :{" "}
        </h4>
        <Controller
          name="package_id"
          control={control}
          render={({ field }) => (
            <Select onValueChange={field.onChange} value={field.value}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder={t("selectPackage")} />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>{t("packages")}</SelectLabel>
                  {packages.map((pkg) => (
                    <SelectItem key={pkg.uuid} value={pkg.uuid}>
                      {pkg.name}
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          )}
        />
      </div>
      {errors.package_id && (
        <p className="text-red-500 text-sm">
          {errors.package_id.message as string}
        </p>
      )}
    </div>
  );
}