import AppHeader from "@comp/AppHeader/page";
import Buttonbriz from "plugins/Buttonbriz/page";
import Input from "plugins/Input/page";
import PersianNumber from "plugins/PersianNumber";
import React from "react";

const AddTask = () => {
  return (
    <div className="pb-20">
      <AppHeader
        title=" افزودن فعالیت جدید"
        sub=" قابلیت افزودن فعالیت جدید مختلف"
        icon2={true}
        iconName2="ARROW"
        iconHref2="/home"
      />

      <div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-4 rtl">
        <div>
          <div className="">
            <Input
              lable="عنوان فعالیت "
              id="taskTitle-id"
              name="taskTitle"
              type={"text"}
            />
          </div>

          <div className="">
            <Input
              lable="توضیحات  کلی فعالیت "
              id="taskDetail-id"
              name="taskDetail"
              type={"text"}
              textarea={true}
            />
          </div>

          <div className="">
            <Input
              lable="عنوان فعالیت "
              id="taskTitle-id"
              name="taskTitle"
              type={"text"}
            />

            <div className="flex ">
              <div className="flex relative rtl mt-2   w-6/12 ">
                <div className="absolute right-[0px] bg-red-900 w-[40px] h-[40px] rounded-full border-2 z-[1]"></div>
                <div className="absolute right-[13px] bg-green-900 w-[40px] h-[40px] rounded-full border-2 z-[2]"></div>
                <div className="absolute right-[26px] bg-sky-900 w-[40px] h-[40px] rounded-full border-2 z-[3]"></div>
                <div className="absolute right-[39px] bg-sky-300 w-[40px] h-[40px] rounded-full border-2 z-[3]"></div>
                <div className="absolute right-[52px] bg-green-300 w-[40px] h-[40px] rounded-full border-2 z-[3]"></div>
                <div className="absolute right-[65px] bg-red-300 w-[40px] h-[40px] rounded-full border-2 z-[3]"></div>
              </div>

              <div className="relative w-full">
                <p className="text-black text-sm mt-4">
                  +
                  <strong className="mx-1">
                    <PersianNumber number={3} />
                  </strong>
                  نفر دیگر
                </p>
              </div>
            </div>
          </div>
        </div>

        <div>
          <div className="flex rtl mt-10">
            <div>
              <input
                type="checkbox"
                className="w-[40px] h-[40px] !rounded-xl mx-2 custom-checkbox mt-1"
              />
            </div>

            <div className="mt-1">
              <h6 className="text-sm text-textMain-100 font-bold">
                آیا این تسک تکرار پذیر است ؟
              </h6>
              <p className="mb-0 text-textMain-100 text-right text-[12px]">
                تسک با قابلیت تکرار در زمان های متناوب تکرار میشوند
              </p>
            </div>
          </div>

          <div className="">
            <Input
              lable="توضیحات  کلی فعالیت "
              id="taskDetail-id"
              name="taskDetail"
              type={"text"}
              mt="2"
              disabled={true}
            />
          </div>
        </div>

        <div>
          <div className="flex rtl mt-5">
            <div>
              <input
                type="checkbox"
                className="w-[40px] h-[40px] !rounded-xl mx-2 custom-checkbox mt-1"
              />
            </div>

            <div className="mt-1">
              <h6 className="text-sm text-textMain-100 font-bold">
                ایا این تسک به گروهی متصل است ؟{" "}
              </h6>
              <p className="mb-0 text-textMain-100 text-right text-[12px]">
                شما میتوانید یک تسک را به گروهی از افراد متصل کنید{" "}
              </p>
            </div>
          </div>

          <div className="">
            <Input
              lable="توضیحات  کلی فعالیت "
              id="taskDetail-id"
              name="taskDetail"
              type={"text"}
              mt="2"
              disabled={true}
            />
          </div>
        </div>

        <div>
          <div className="flex rtl mt-5">
            <div>
              <input
                type="checkbox"
                className="w-[40px] h-[40px] !rounded-xl mx-2 custom-checkbox mt-1"
              />
            </div>

            <div className="mt-1">
              <h6 className="text-sm text-textMain-100 font-bold">
                ایا این تسک به فرد متصل است ؟{" "}
              </h6>
              <p className="mb-0 text-textMain-100 text-right text-[12px]">
                شما میتوانید یک تسک را به تنها یک فرد خاص متصل کنید{" "}
              </p>
            </div>
          </div>

          <div className="">
            <Input
              lable="توضیحات  کلی فعالیت "
              id="taskDetail-id"
              name="taskDetail"
              type={"text"}
              mt="2"
              disabled={true}
            />
          </div>
        </div>

        <Buttonbriz title="ثبت فعالیت" color="INFO" icon="CHECK" />
      </div>
    </div>
  );
};

export default AddTask;
