import { Checkbox } from "../ui/checkbox";

export default function PermissonDrawer() {
  const permissionItems = [
    {
      id: 1,
      module: "Home",
      selectedAll: true,
      permissions: [
        {
          id: 1,
          name: "Add User ",
          checked: true,
        },
        {
          id: 2,
          name: "Edit User ",
          checked: false,
        },
        {
          id: 3,
          name: "Delete User ",
          checked: true,
        },
        {
          id: 4,
          name: "Add Customer",
          checked: true,
        },
        {
          id: 5,
          name: "Add Invoice",
          checked: true,
        },
        {
          id: 6,
          name: "Delete User",
          checked: true,
        },
      ],
    },
    {
      id: 1,
      module: "Service",
      selectedAll: true,
      permissions: [
        {
          id: 1,
          name: "Add User ",
          checked: true,
        },
        {
          id: 2,
          name: "Edit User ",
          checked: false,
        },
        {
          id: 3,
          name: "Delete User ",
          checked: true,
        },
        {
          id: 4,
          name: "Add Customer",
          checked: true,
        },
        {
          id: 5,
          name: "Add Invoice",
          checked: true,
        },
        {
          id: 6,
          name: "Delete User",
          checked: true,
        },
      ],
    },
    {
      id: 1,
      module: "Support Desk",
      selectedAll: true,
      permissions: [
        {
          id: 1,
          name: "Add User ",
          checked: true,
        },
        {
          id: 2,
          name: "Edit User ",
          checked: false,
        },
        {
          id: 3,
          name: "Delete User ",
          checked: true,
        },
        {
          id: 4,
          name: "Add Customer",
          checked: true,
        },
        {
          id: 5,
          name: "Add Invoice",
          checked: true,
        },
        {
          id: 6,
          name: "Delete User",
          checked: true,
        },
      ],
    },
    {
      id: 1,
      module: "Profile",
      selectedAll: true,
      permissions: [
        {
          id: 1,
          name: "Add User ",
          checked: true,
        },
        {
          id: 2,
          name: "Edit User ",
          checked: false,
        },
        {
          id: 3,
          name: "Delete User ",
          checked: true,
        },
        {
          id: 4,
          name: "Add Customer",
          checked: true,
        },
        {
          id: 5,
          name: "Add Invoice",
          checked: true,
        },
        {
          id: 6,
          name: "Delete User",
          checked: true,
        },
      ],
    },
    {
      id: 1,
      module: "Order",
      selectedAll: true,
      permissions: [
        {
          id: 1,
          name: "Add User ",
          checked: true,
        },
        {
          id: 2,
          name: "Edit User ",
          checked: false,
        },
        {
          id: 3,
          name: "Delete User ",
          checked: true,
        },
        {
          id: 4,
          name: "Add Customer",
          checked: true,
        },
        {
          id: 5,
          name: "Add Invoice",
          checked: true,
        },
        {
          id: 6,
          name: "Delete User",
          checked: true,
        },
      ],
    },
  ];
  return (
    <div className="overflow-auto">
      <div className="">
        <div className="flex items-center space-x-2  mb-9">
          <Checkbox
            id="permission"
            className="dark:border-[#F5F7FA] dark:text-white dark:bg-transparent w-5 h-5"
          />
          <label
            htmlFor="permission"
            className="text-[19px] font-semibold leading-none text-[#232E3C] dark:text-[#F5F7FA]"
          >
            All Permission
          </label>
        </div>

        <div>
          {permissionItems.map((item) => (
            <div>
              <div className="bg-[#F5F7FA] dark:bg-[#1F2A3B] rounded-md px-8 py-3 flex justify-between mt-2">
                <h3 className="text-[19px] font-semibold leading-none text-[#232E3C] dark:text-[#F5F7FA]">
                  {item?.module}
                </h3>
                <div className="flex items-center space-x-2 ">
                  <Checkbox
                    id="home-all-select"
                    className="dark:border-gray-400 "
                  />
                  <label
                    htmlFor="home-all-select"
                    className="text-[13px] font-semibold leading-none text-[#5E6E82] dark:text-gray-400"
                  >
                    Select All
                  </label>
                </div>
              </div>
              <div className="flex flex-wrap gap-6 py-6 px-2">
                {item?.permissions?.map((item) => (
                  <div className="flex items-center space-x-2 ">
                    <Checkbox
                      id={item?.name}
                      className="dark:border-[#F5F7FA] dark:bg-transparent dark:text-[#F5F7FA]"
                    />
                    <label
                      htmlFor={item?.name}
                      className="text-[13px] font-semibold leading-none text-[#232E3C] dark:text-[#F5F7FA]"
                    >
                      {item?.name}
                    </label>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}