import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@kit/ui/select';
import { Trans } from '@kit/ui/trans';

const HealthBenefitFields = () => {
  return (
    <div className="flex flex-col gap-3">
      <FormField
        name="occurance"
        render={({ field }) => (
          <FormItem>
            <FormLabel>
              <Trans i18nKey="billing:healthBenefitForm.title" />
            </FormLabel>
            <FormControl>
              <Select {...field} onValueChange={field.onChange}>
                <SelectTrigger>
                  <SelectValue
                    placeholder={<Trans i18nKey="common:formField:occurance" />}
                  />
                </SelectTrigger>

                <SelectContent>
                  <SelectGroup>
                    <SelectItem value="yearly">
                      <Trans i18nKey="billing:occurance.yearly" />
                    </SelectItem>
                    <SelectItem value="quarterly">
                      <Trans i18nKey="billing:occurance.quarterly" />
                    </SelectItem>
                    <SelectItem value="monthly">
                      <Trans i18nKey="billing:occurance.monthly" />
                    </SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        name="amount"
        render={({ field }) => (
          <FormItem>
            <FormLabel>
              <Trans i18nKey={'common:formField:amount'} />
            </FormLabel>
            <FormControl>
              <Input
                {...field}
                type="number"
                onChange={(e) =>
                  field.onChange(
                    e.target.value === '' ? null : Number(e.target.value),
                  )
                }
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </div>
  );
};

export default HealthBenefitFields;