import { TextAreaField } from "@repo/rdx-ui/components";
import { FieldDescription, FieldGroup, FieldLegend, FieldSet } from '@repo/shadcn-ui/components';
import { StickyNoteIcon } from "lucide-react";
import { ComponentProps } from 'react';
import { useFormContext } from "react-hook-form";
import { useTranslation } from "../../i18n";
import { InvoiceFormData } from "../../schemas";

export const InvoiceNotes = (props: ComponentProps<"fieldset">) => {
  const { t } = useTranslation();
  const { control } = useFormContext<InvoiceFormData>();

  return (
    <FieldSet {...props}>
      <FieldLegend>
        <StickyNoteIcon className='size-6 text-muted-foreground' />{t("form_groups.basic_info.title")}
      </FieldLegend>

      <FieldDescription>{t("form_groups.basic_info.description")}</FieldDescription>
      <FieldGroup className='grid grid-cols-1 gap-x-6 h-full min-h-0'>
        <TextAreaField
          maxLength={1024}
          className='lg:col-span-full h-full'
          control={control}
          name='notes'
          label={t("form_fields.notes.label")}
          placeholder={t("form_fields.notes.placeholder")}
          description={t("form_fields.notes.description")}
        />
      </FieldGroup>
    </FieldSet>
  );
};
