export default function AddSite() {
    return (
        <dialog id="add_site" className="modal">
            <div className="modal-box w-2/3 max-w-2/3">
                <div className="flex flex-col gap-4">
                    <header>
                        <h3 className="text-2xl font-semibold tracking-tight">Add New Site</h3>
                        <p className="text-sm text-gray-500 mt-1">Provide details for the new site location</p>
                    </header>
 
                    <div className="space-y-6">
                        <div className="form-control">
                            <label className="label">
                                <span className="label-text font-medium text-base">Site Name</span>
                            </label>
                            <input 
                                type="text" 
                                className="input input-bordered w-full focus:ring-2" 
                                placeholder="e.g. Downtown Office"
                            />
                        </div>

                        <div className="form-control">
                            <label className="label">
                                <span className="label-text font-medium text-base">
                                    Description
                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
                                </span>
                            </label>
                            <textarea 
                                className="textarea textarea-bordered w-full focus:ring-2" 
                                placeholder="Enter a brief description..."
                                rows={4}
                            ></textarea>
                        </div>
                    </div>

                    <div className="modal-action flex justify-end">
                        <form method="dialog" className="flex gap-3">
                            <button className="btn btn-ghost">Cancel</button>
                            <button className="btn btn-primary px-6">Add Site</button>
                        </form>
                    </div>
                </div>
            </div>
        </dialog>
    )
}