ProjectDetailsDialog

// import EBInput from "@components/Common/EBInput.component"
import { Icon } from "@iconify/react/dist/iconify.js"
import { Dialog } from "@material-tailwind/react"
import "../../../index.css"
import EBSelect from "@components/Common/EBSelect.component"
import { PrimaryButton } from "@components/Common/Buttons.component"


function ProjectDetailsDialog({isOpen}:{isOpen:boolean}) {
  return (
    <Dialog open={isOpen} handler={() => console.log("Displayed")} className="relative p-10" >
      <button><Icon icon="charm:cross" className="absolute top-3 right-3 text-2xl"/></button>
      <div className="overflow-y-scroll scrollbar1 h-[23rem]">
        <div className="flex h-14">
          <Icon icon="mdi:file-document-box-outline" className="text-primary bg-[#e5effe] h-14 w-14 p-3.5  rounded-full" />
          <p className="ml-5 text-2xl my-auto font-bold text-black">Project Details</p>
        </div>

        <div className="flex">
          <div className="w-5/12 border border-[#ededec] rounded-md bg-[#f4f8fe] mt-2 p-3">
            <p className="text-md text-[#666666]">Project Name</p>
            <p className="text-black text-lg mb-3">christopher Nolan</p>

            <p className="text-md text-[#666666]">Created On</p>
            <p className="text-black text-lg mb-3">Ebtest Harsh 41</p>

            <p className="text-md text-[#666666]">Owner Email</p>
            <p className="text-black text-lg mb-3">elecbits@gmail.com</p>

            <p className="text-md text-[#666666]">Quantity</p>
            <p className="text-black text-lg">5</p>
          </div>

          <div className="w-6/12 ml-5 ">
            <p className="text-black text-lg">Project ID</p>
            <input className="px-3 py-2 my-2  w-full border-[2px] border-[#cdcccd] outline-0 rounded-md" type="text" placeholder="fill"></input>

            <p className="text-black text-lg">Internal Name</p>
            <input className="px-3 py-2 my-2  w-full border-[2px] border-[#cdcccd] outline-0 rounded-md" type="text" placeholder="fill"></input>

            <p className="text-[#666666] text-sm">Other Specification</p>
            <p className="text-black text-lg">Lorem Ipsum Dolor Sit Amet Consectetur. Ut Velit Gravida Mi Rhoncus. Facilisi Suspendisse.</p>
          </div>
        </div>

        <div>
          <div className="flex h-14 mt-5">
            <div className="bg-[#e5effe] h-14 w-14   rounded-full">
              <Icon icon="uis:graph-bar" className="text-primary text-xl my-auto mx-auto h-full " />
            </div>
            <p className="ml-5 text-2xl my-auto font-bold text-black">Tracking Details</p>
          </div>

          <div className="flex">
            <div className="w-1/2 px-2 ">
              <EBSelect
                name="max"
                label="Client Rating"
                options={["label1", "label2", "label3", "label4"]}
                gap="1"
              ></EBSelect>
              <EBSelect
                name="max"
                label="Client Rating"
                options={["label1", "label2", "label3", "label4"]}
                gap="1"
              ></EBSelect>
              <EBSelect
                name="max"
                label="Client Rating"
                options={["label1", "label2", "label3", "label4"]}
                gap="1"
              ></EBSelect>
            </div>
            <div className="w-1/2 px-2">
              <EBSelect
                name="max"
                label="Client Rating"
                options={["label1", "label2", "label3", "label4"]}
                gap="1"
              ></EBSelect>
              <EBSelect
                name="max"
                label="Client Rating"
                options={["label1", "label2", "label3", "label4"]}
                gap="1"
              ></EBSelect>
              <EBSelect
                name="max"
                label="Client Rating"
                options={["label1", "label2", "label3", "label4"]}
                gap="1"
              ></EBSelect>
            </div>
          </div>
          <div className="w-full flex justify-center my-5">
          <PrimaryButton content="Save" className="py-1.5 px-7 mx-auto "></PrimaryButton>
          </div>
        </div>

      </div>

    </Dialog>
  )
}

export default ProjectDetailsDialog