import { type FC } from "react";
import { useTranslation } from "react-i18next";

type Props = {
  value?: string;
  onChange?: (value: string) => void;
  onSave?: () => void;
  isSaving?: boolean;
};

const TaskDetailDescription: FC<Props> = ({ value = "", onChange, onSave, isSaving = false }) => {
  const { t } = useTranslation("global");

  return (
    <div className="mt-6">
      <div className="text-sm font-medium mb-2">{t("taskmanager.task_detail.description")}</div>
      <div className="relative bg-white/25 rounded-xl">
        <button
          type="button"
          onClick={onSave}
          disabled={isSaving}
          className="absolute top-2 left-2 z-10 h-7 px-2.5 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
        >
          {t("save")}
        </button>
        <textarea
          value={value}
          onChange={(e) => onChange?.(e.target.value)}
          placeholder={t("taskmanager.task_detail.description_placeholder")}
          rows={5}
          className="w-full bg-transparent rounded-xl px-4 pt-4 pb-3 text-xs outline-none resize-none placeholder:text-description"
        />
      </div>
    </div>
  );
};

export default TaskDetailDescription;
