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

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

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

  return (
    <div className="mt-6">
      <div className="text-sm font-medium mb-2">{t("taskmanager.task_detail.description")}</div>
      <textarea
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
        placeholder={t("taskmanager.task_detail.description_placeholder")}
        rows={5}
        className="w-full bg-white/25 rounded-xl px-4 py-3 text-xs outline-none resize-none placeholder:text-description"
      />
    </div>
  );
};

export default TaskDetailDescription;