import React from "react";

const PermissionsList = ({ permissions }) => {
    return (
        <div>
            <h3 className="text-lg font-bold mb-4">Assign Permissions</h3>
            <div>
                <div className="flex flex-col">
                    <div className="-m-1.5 overflow-x-auto">
                        <div className="p-1.5 min-w-full inline-block align-middle">
                            <div className=" ">
                                <table className="min-w-full divide-y divide-gray-200 overflow-y-auto block max-h-[390px] ">
                                    <thead className="bg-gray-50 ">
                                        <tr>
                                            <th
                                                scope="col"
                                                className="py-3 ps-4"
                                            >
                                            </th>
                                            <th
                                                scope="col"
                                                className="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase "
                                            >
                                                Permission
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-gray-200 ">
                                        <tr>
                                            <td className="py-3 ps-4">
                                                <div className="flex items-center h-5">
                                                    <input
                                                        id="hs-table-checkbox-1"
                                                        type="checkbox"
                                                        className="border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 "
                                                    />
                                                    <label
                                                        htmlFor="hs-table-checkbox-1"
                                                        className="sr-only"
                                                    >
                                                        Checkbox
                                                    </label>
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                                User can add new item category
                                            </td>
                                        </tr>
                                        <tr>
                                            <td className="py-3 ps-4">
                                                <div className="flex items-center h-5">
                                                    <input
                                                        id="hs-table-checkbox-2"
                                                        type="checkbox"
                                                        className="border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 "
                                                    />
                                                    <label
                                                        htmlFor="hs-table-checkbox-2"
                                                        className="sr-only"
                                                    >
                                                        Checkbox
                                                    </label>
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                                User can access to new opening supplier balance form. User aan add customers.
                                            </td>
                                        </tr>
                                        <tr>
                                            <td className="py-3 ps-4">
                                                <div className="flex items-center h-5">
                                                    <input
                                                        id="hs-table-checkbox-3"
                                                        type="checkbox"
                                                        className="border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 "
                                                    />
                                                    <label
                                                        htmlFor="hs-table-checkbox-3"
                                                        className="sr-only"
                                                    >
                                                        Checkbox
                                                    </label>
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                                User can access to new opening customer balance form. User can add new employees
                                            </td>
                                        </tr>
                                        <tr>
                                            <td className="py-3 ps-4">
                                                <div className="flex items-center h-5">
                                                    <input
                                                        id="hs-table-checkbox-4"
                                                        type="checkbox"
                                                        className="border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 "
                                                    />
                                                    <label
                                                        htmlFor="hs-table-checkbox-4"
                                                        className="sr-only"
                                                    >
                                                        Checkbox
                                                    </label>
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                                User can add new General Ledger accounts
                                            </td>
                                        </tr>
                                        <tr>
                                            <td className="py-3 ps-4">
                                                <div className="flex items-center h-5">
                                                    <input
                                                        id="hs-table-checkbox-5"
                                                        type="checkbox"
                                                        className="border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 "
                                                    />
                                                    <label
                                                        htmlFor="hs-table-checkbox-5"
                                                        className="sr-only"
                                                    >
                                                        Checkbox
                                                    </label>
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                                User can add new items
                                            </td>
                                        </tr>
                                        <tr>
                                            <td className="py-3 ps-4">
                                                <div className="flex items-center h-5">
                                                    <input
                                                        id="hs-table-checkbox-5"
                                                        type="checkbox"
                                                        className="border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 "
                                                    />
                                                    <label
                                                        htmlFor="hs-table-checkbox-5"
                                                        className="sr-only"
                                                    >
                                                        Checkbox
                                                    </label>
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                                User can update business information.
                                            </td>
                                        </tr>
                                        <tr>
                                            <td className="py-3 ps-4">
                                                <div className="flex items-center h-5">
                                                    <input
                                                        id="hs-table-checkbox-5"
                                                        type="checkbox"
                                                        className="border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 "
                                                    />
                                                    <label
                                                        htmlFor="hs-table-checkbox-5"
                                                        className="sr-only"
                                                    >
                                                        Checkbox
                                                    </label>
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                                User can access to opening stock form.
                                            </td>
                                        </tr>
                                        <tr>
                                            <td className="py-3 ps-4">
                                                <div className="flex items-center h-5">
                                                    <input
                                                        id="hs-table-checkbox-5"
                                                        type="checkbox"
                                                        className="border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 "
                                                    />
                                                    <label
                                                        htmlFor="hs-table-checkbox-5"
                                                        className="sr-only"
                                                    >
                                                        Checkbox
                                                    </label>
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                                User can add new production logic
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="mt-4 flex flex-row space-x-2">
                <div>
                    <button className="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">Select All</button>
                </div>
                <div>
                    <button className="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-gray-200 text-gray-500 hover:bg-gray-300 focus:outline-hidden focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none">Clear</button>
                </div>
            </div>
            
        </div>
    );
};

export default PermissionsList;
