import React, { useState } from "react";

const BranchSelector = ({ branches }) => {
    const [selectedBranches, setSelectedBranches] = useState([]);

    const handleAddBranch = (branch) => {
        setSelectedBranches([...selectedBranches, branch]);
    };

    return (
        <div>
            <h3 className="text-lg font-bold mb-4">Allowed Branches</h3>
            <div className="flex flex-row space-x-2">
                <div>
                    <select className="py-2 px-4 pe-9 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none ">
                        <option selected="">Select the Branch</option>
                        <option>Hemas</option>
                        <option>Rainco</option>
                        <option>Wijaya</option>
                    </select>
                </div>
                <div className="ml-2">
                    <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"
                        onClick={() => handleAddBranch()}
                    >
                        Add
                    </button>
                </div>
            </div>

            <div className="flex flex-col mt-5">
                <div className="-m-1.5 overflow-x-auto">
                    <div className="p-1.5 min-w-full inline-block align-middle">
                        <div className="overflow-hidden">
                            <table className="min-w-full divide-y divide-gray-200 ">
                                <thead>
                                    <tr>
                                        <th
                                            scope="col"
                                            className="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase "
                                        >
                                            Branch Code
                                        </th>
                                        <th
                                            scope="col"
                                            className="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase "
                                        >
                                            Name
                                        </th>
                                        <th
                                            scope="col"
                                            className="px-6 py-3 text-end text-xs font-medium text-gray-500 uppercase "
                                        >
                                            Action
                                        </th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-gray-200 ">
                                    <tr>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                            01
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-800 ">
                                            Hemas
                                        </td>
                                        
                                        <td className="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                            <button
                                                type="button"
                                                className="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 focus:outline-hidden focus:text-blue-800 disabled:opacity-50 disabled:pointer-events-none "
                                            >
                                                Remove
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                            02
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-800 ">
                                            HEMAS - 02
                                        </td>
                                        
                                        <td className="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                            <button
                                                type="button"
                                                className="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 focus:outline-hidden focus:text-blue-800 disabled:opacity-50 disabled:pointer-events-none "
                                            >
                                                Remove
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                                            03
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-800 ">
                                            Wijaya
                                        </td>
                                        
                                        <td className="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                            <button
                                                type="button"
                                                className="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 focus:outline-hidden focus:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400 dark:focus:text-blue-400"
                                            >
                                                Remove
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default BranchSelector;
