import { TickCircle } from "iconsax-react";
import { useTranslation } from "react-i18next";
import Button from "../../../components/Button";
import DatePickerComponent from "../../../components/DatePicker";
import Input from "../../../components/Input";
import Textarea from "../../../components/Textarea";
import CreateProjectSidebar from "./components/CreateProjectSidebar";

const CreateProject = () => {
  const { t } = useTranslation("global");

  return (
    <div className="w-full mt-4">
      <div className="flex w-full justify-between items-center">
        <div>{t("taskmanager.new_project")}</div>
        <div>
          <Button className="px-5" isLoading={false}>
            <div className="flex gap-2">
              <TickCircle className="size-5" color="#fff" />
              <div>{t("taskmanager.submit_project")}</div>
            </div>
          </Button>
        </div>
      </div>

      <div className="flex gap-6">
        <div className="flex-1">
          <div className="flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl">
            <div className="text-sm font-bold">{t("taskmanager.project_info")}</div>

            <div className="mt-8">
              <Input label={t("taskmanager.project_name")} />
            </div>

            <div className="mt-8 rowTwoInput">
              <DatePickerComponent label={t("taskmanager.project_start_date")} placeholder={t("taskmanager.select_date")} onChange={() => undefined} />
              <Input label={t("taskmanager.employer_name")} />
            </div>

            <div className="mt-8">
              <Textarea label={t("description")} />
            </div>
          </div>
        </div>

        <CreateProjectSidebar />
      </div>
    </div>
  );
};

export default CreateProject;