import { TickCircle } from "iconsax-react";
import { useTranslation } from "react-i18next";
import Button from "../../../components/Button";
import Input from "../../../components/Input";
import Select from "../../../components/Select";
import Textarea from "../../../components/Textarea";
import CreateWorkspaceSidebar from "./components/CreateWorkspaceSidebar";

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

  return (
    <div className="w-full mt-4">
      <div className="flex w-full justify-between items-center">
        <div>{t("taskmanager.new_workspace")}</div>
        <div>
          <Button className="px-5" isLoading={false}>
            <div className="flex gap-2">
              <TickCircle className="size-5" color="#fff" />
              <div>{t("taskmanager.submit_workspace")}</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">اطلاعات</div>

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

              <Select label={t("taskmanager.workspacetype")} items={[]} />
            </div>
            <div className="mt-8">
              <Textarea label={t("taskmanager.workspace_description")} />
            </div>
          </div>
        </div>

        <CreateWorkspaceSidebar />
      </div>
    </div>
  );
};

export default CreateWorkspace;