import { useBoolean } from "usehooks-ts";

import FormTextAreaInput from "@/components/form/components/basic/form-textarea-input";
import Card from "@/components/ui/card/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible/collapsible";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";

const CoreSummaryRequestNoteFormItem = () => {
  const collapseBoolean = useBoolean(true);
  return (
    <Card>
      <Collapsible
        open={collapseBoolean.value}
        onOpenChange={collapseBoolean.setValue}
      >
        <CollapsibleTrigger className="flex w-full justify-between text-left text-sm font-semibold">
          Talebi onaylayacak kişiye bir notunuz var mı?
          <LIcon
            name={collapseBoolean.value ? "ChevronUp" : "ChevronDown"}
            size={18}
          />
        </CollapsibleTrigger>
        <CollapsibleContent className="mt-4">
          <FormTextAreaInput
            name="request-note"
            placeholder="Notunuzu buraya giriniz..."
            maxLength={100}
            rules={{
              maxLength: {
                value: 100,
                message: "En fazla 100 karakter girebilirsiniz",
              },
            }}
          />
        </CollapsibleContent>
      </Collapsible>
    </Card>
  );
};

export default CoreSummaryRequestNoteFormItem;