import { ArrowRight2 } from "iconsax-react";
import { type FC, useState } from "react";
import { useTranslation } from "react-i18next";
import Button from "../../../../../components/Button";
import Input from "../../../../../components/Input";

type Props = {
  onClose: () => void;
  onSubmit: (title: string) => void;
  isSubmitting?: boolean;
};

const TaskDetailChecklistForm: FC<Props> = ({ onClose, onSubmit, isSubmitting = false }) => {
  const { t } = useTranslation("global");
  const [title, setTitle] = useState("");

  const handleSubmit = () => {
    const trimmed = title.trim();
    if (!trimmed) return;
    onSubmit(trimmed);
  };

  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-center relative">
        <Button type="button" onClick={onClose} className="absolute right-0 size-7 bg-transparent text-inherit w-auto h-auto p-0 border-0 rounded-none shadow-none" aria-label={t("back")}>
          <ArrowRight2 size={16} color="#292D32" />
        </Button>
        <h3 className="text-xs font-bold">{t("taskmanager.task_detail.checklist")}</h3>
      </div>

      <Input label={t("taskmanager.task_detail.label_title")} value={title} onChange={(e) => setTitle(e.target.value)} className="h-8 bg-white/63 border-white" labelClassName="text-xs" />

      <div className="flex justify-end gap-2">
        <Button type="button" onClick={onClose} className="h-8 bg-[#E8E4F0] text-[#292D32] rounded-xl text-xs w-[95px]">
          {t("cancel")}
        </Button>
        <Button
          type="button"
          onClick={handleSubmit}
          disabled={!title.trim() || isSubmitting}
          className="h-8 bg-[#292D32] text-white rounded-xl text-xs disabled:opacity-50 w-[95px]"
        >
          {t("save")}
        </Button>
      </div>
    </div>
  );
};

export default TaskDetailChecklistForm;
