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

export default function PackageDurationSelector() {
  const t = useTranslations("SubscribePage");
  const { control } = 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("duration")} :{" "}
        </h4>
        <Controller
          name="pay_type"
          control={control}
          render={({ field }) => (
            <Select onValueChange={field.onChange} value={field.value}>
              <SelectTrigger className="w-[140px]">
                <SelectValue placeholder={t("selectDuration")} />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="month">{t("monthly")}</SelectItem>
                  <SelectItem value="year">{t("yearly")}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          )}
        />
      </div>
    </div>
  );
}