// import React, { useState, useEffect } from 'react';
// import { useNavigate } from 'react-router-dom';
// import { ICountry, IState, ICity } from 'country-state-city';
// import { Country, State, City } from 'country-state-city';
// import Swal from 'sweetalert2';
// import { AddInsurance } from '../../API'; // Adjust the import path

// const AddInsuranceCompany = () => {
//     const navigate = useNavigate();
//     const [loading, setLoading] = useState(false);
//     const [error, setError] = useState<string | null>(null);
    
//     const [companyData, setCompanyData] = useState({
//         company_name: "",
//         insurance_type: "Health",
//         contact: "",
//         email: "",
//         address: "",
//         country: "",
//         state: "",
//         city: "",
//         pincode: "",
//         website: "",
//         status: true
//     });

//     // Country-State-City data
//     const [countries, setCountries] = useState<ICountry[]>([]);
//     const [states, setStates] = useState<IState[]>([]);
//     const [cities, setCities] = useState<ICity[]>([]);
    

//     useEffect(() => {
//         // Load countries on component mount
//         setCountries(Country.getAllCountries());
//     }, []);

//     useEffect(() => {
//         // Load states when country changes
//         if (companyData.country) {
//             const countryCode = countries.find(c => c.name === companyData.country)?.isoCode;
//             if (countryCode) {
//                 setStates(State.getStatesOfCountry(countryCode));
//                 // Reset state and city when country changes
//                 setCompanyData(prev => ({ ...prev, state: "", city: "" }));
//             }
//         }
//     }, [companyData.country]);

//     useEffect(() => {
//         // Load cities when state changes
//         if (companyData.state && companyData.country) {
//             const countryCode = countries.find(c => c.name === companyData.country)?.isoCode;
//             const stateCode = states.find(s => s.name === companyData.state)?.isoCode;
            
//             if (countryCode && stateCode) {
//                 setCities(City.getCitiesOfState(countryCode, stateCode));
//                 // Reset city when state changes
//                 setCompanyData(prev => ({ ...prev, city: "" }));
//             }
//         }
//     }, [companyData.state]);

//     const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
//         const { name, value, type } = e.target;
//         const checked = type === 'checkbox' ? (e.target as HTMLInputElement).checked : null;
        
//         setCompanyData(prev => ({
//             ...prev,
//             [name]: type === 'checkbox' ? checked : value
//         }));
//     };

//     const handleSubmit = async (e: React.FormEvent) => {
//         e.preventDefault();
//         setLoading(true);
//         setError(null);
        
//         try {
//             // Prepare the payload
//             const payload = {
//                 company_name: companyData.company_name,
//                 insurance_type: companyData.insurance_type,
//                 contact: companyData.contact,
//                 email: companyData.email,
//                 address: companyData.address,
//                 country: companyData.country,
//                 state: companyData.state,
//                 city: companyData.city,
//                 pincode: companyData.pincode,
//                 website: companyData.website,
//                 status: companyData.status
//             };

//             // Call the API
//             const response = await AddInsurance(payload);

//             if(response.status == true){
//     Swal.fire({
//                 title: 'Success!',
//                 text: 'Insurance company created successfully',
//                 icon: 'success',
//                 confirmButtonText: 'OK'
//             }).then(() => {
//                 navigate('/insurance');
//             });
//             }

        
//         } catch (error: any) {
//             setError(error.message);
//             Swal.fire({
//                 title: 'Error!',
//                 text: error.message || 'Failed to add insurance company',
//                 icon: 'error',
//                 confirmButtonText: 'OK'
//             });
//         } finally {
//             setLoading(false);
//         }
//     };
//     return (
//         <div className="mx-auto p-4">
//             {loading ? (
//                 <div className="flex justify-center items-center h-40">
//                     <div className="w-12 h-12 border-t-4 border-blue-500 border-solid rounded-full animate-spin"></div>
//                 </div>
//             ) : error ? (
//                 <div className="flex justify-center items-center h-40">
//                     <p className="text-red-500">{error}</p>
//                 </div>
//             ) : (
//                 <form onSubmit={handleSubmit} className="space-y-6 w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
//                     <h2 className="text-2xl font-semibold mb-4 text-gray-800 dark:text-white">Add New Insurance Company</h2>

//                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//                         {/* Company Name */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Company Name</label>
//                             <input
//                                 type="text"
//                                 name="company_name"
//                                 value={companyData.company_name}
//                                 onChange={handleChange}
//                                 required
//                                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                                 placeholder="Enter company name"
//                             />
//                         </div>

//                         {/* Insurance Type */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Insurance Type</label>
//                             <select
//                                 name="insurance_type"
//                                 value={companyData.insurance_type}
//                                 onChange={handleChange}
//                                 className="form-select w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                             >
//                                 <option value="Health">Health</option>
//                                 <option value="Life">Life</option>
//                                 <option value="Auto">Auto</option>
//                                 <option value="Property">Property</option>
//                                 <option value="Travel">Travel</option>
//                             </select>
//                         </div>

//                         {/* Contact */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Contact Number</label>
//                             <input
//                                 type="tel"
//                                 name="contact"
//                                 value={companyData.contact}
//                                 onChange={handleChange}
//                                 required
//                                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                                 placeholder="Enter contact number"
//                             />
//                         </div>

//                         {/* Email */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Email</label>
//                             <input
//                                 type="email"
//                                 name="email"
//                                 value={companyData.email}
//                                 onChange={handleChange}
//                                 required
//                                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                                 placeholder="Enter email"
//                             />
//                         </div>

//                         {/* Address */}
//                         <div className="md:col-span-2">
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Address</label>
//                             <input
//                                 type="text"
//                                 name="address"
//                                 value={companyData.address}
//                                 onChange={handleChange}
//                                 required
//                                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                                 placeholder="Enter address"
//                             />
//                         </div>

//                         {/* Country */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Country</label>
//                             <select
//                                 name="country"
//                                 value={companyData.country}
//                                 onChange={handleChange}
//                                 required
//                                 className="form-select w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                             >
//                                 <option value="">Select Country</option>
//                                 {countries.map(country => (
//                                     <option key={country.isoCode} value={country.name}>
//                                         {country.name}
//                                     </option>
//                                 ))}
//                             </select>
//                         </div>

//                         {/* State */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">State</label>
//                             <select
//                                 name="state"
//                                 value={companyData.state}
//                                 onChange={handleChange}
//                                 required
//                                 disabled={!companyData.country}
//                                 className="form-select w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                             >
//                                 <option value="">Select State</option>
//                                 {states.map(state => (
//                                     <option key={state.isoCode} value={state.name}>
//                                         {state.name}
//                                     </option>
//                                 ))}
//                             </select>
//                         </div>

//                         {/* City */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">City</label>
//                             <select
//                                 name="city"
//                                 value={companyData.city}
//                                 onChange={handleChange}
//                                 required
//                                 disabled={!companyData.state}
//                                 className="form-select w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                             >
//                                 <option value="">Select City</option>
//                                 {cities.map(city => (
//                                     <option key={city.name} value={city.name}>
//                                         {city.name}
//                                     </option>
//                                 ))}
//                             </select>
//                         </div>

//                         {/* Pincode */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Pincode</label>
//                             <input
//                                 type="text"
//                                 name="pincode"
//                                 value={companyData.pincode}
//                                 onChange={handleChange}
//                                 required
//                                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                                 placeholder="Enter pincode"
//                             />
//                         </div>

//                         {/* Website */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Website</label>
//                             <input
//                                 type="url"
//                                 name="website"
//                                 value={companyData.website}
//                                 onChange={handleChange}
//                                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                                 placeholder="Enter website URL"
//                             />
//                         </div>

//                         {/* Status */}
//                         <div className="flex items-center">
//                             <input
//                                 type="checkbox"
//                                 name="status"
//                                 id="status"
//                                 checked={companyData.status}
//                                 onChange={handleChange}
//                                 className="form-checkbox h-5 w-5 text-blue-600"
//                             />
//                             <label htmlFor="status" className="ml-2 block text-gray-700 dark:text-gray-300 font-semibold">
//                                 Active
//                             </label>
//                         </div>
//                     </div>

//                     {/* Buttons */}
//                     <div className="flex justify-end space-x-4 mt-6">
//                         <button
//                             type="button"
//                             onClick={() => navigate('/insurance')}
//                             className="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
//                         >
//                             Cancel
//                         </button>
//                         <button
//                             type="submit"
//                             className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
//                         >
//                             {loading ? 'Saving...' : 'Add Company'}
//                         </button>
//                     </div>
//                 </form>
//             )}
//         </div>
//     );
// };

// export default AddInsuranceCompany;




import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { ICountry, IState, ICity } from 'country-state-city';
import { Country, State, City } from 'country-state-city';
import Swal from 'sweetalert2';
import { AddInsurance } from '../../API';
import { FaBuilding, FaPhone, FaEnvelope, FaMapMarkerAlt, FaGlobe, FaCheck } from 'react-icons/fa';

const AddInsuranceCompany = () => {
    const navigate = useNavigate();
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    
    const [companyData, setCompanyData] = useState({
        company_name: "",
        insurance_type: "Health",
        contact: "",
        email: "",
        address: "",
        country: "",
        state: "",
        city: "",
        pincode: "",
        website: "",
        status: true
    });

    // Country-State-City data
    const [countries, setCountries] = useState<ICountry[]>([]);
    const [states, setStates] = useState<IState[]>([]);
    const [cities, setCities] = useState<ICity[]>([]);
    
    useEffect(() => {
        setCountries(Country.getAllCountries());
    }, []);

    useEffect(() => {
        if (companyData.country) {
            const countryCode = countries.find(c => c.name === companyData.country)?.isoCode;
            if (countryCode) {
                setStates(State.getStatesOfCountry(countryCode));
                setCompanyData(prev => ({ ...prev, state: "", city: "" }));
            }
        }
    }, [companyData.country]);

    useEffect(() => {
        if (companyData.state && companyData.country) {
            const countryCode = countries.find(c => c.name === companyData.country)?.isoCode;
            const stateCode = states.find(s => s.name === companyData.state)?.isoCode;
            
            if (countryCode && stateCode) {
                setCities(City.getCitiesOfState(countryCode, stateCode));
                setCompanyData(prev => ({ ...prev, city: "" }));
            }
        }
    }, [companyData.state]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const { name, value, type } = e.target;
        const checked = type === 'checkbox' ? (e.target as HTMLInputElement).checked : null;
        
        setCompanyData(prev => ({
            ...prev,
            [name]: type === 'checkbox' ? checked : value
        }));
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        setError(null);
        
        try {
            const payload = {
                company_name: companyData.company_name,
                insurance_type: companyData.insurance_type,
                contact: companyData.contact,
                email: companyData.email,
                address: companyData.address,
                country: companyData.country,
                state: companyData.state,
                city: companyData.city,
                pincode: companyData.pincode,
                website: companyData.website,
                status: companyData.status
            };

            const response = await AddInsurance(payload);

            if(response.status == true) {
                Swal.fire({
                    title: 'Success!',
                    text: 'Insurance company created successfully',
                    icon: 'success',
                    confirmButtonColor: '#A8916A'
                }).then(() => {
                    navigate('/insurance');
                });
            }
        } catch (error: any) {
            setError(error.message);
            Swal.fire({
                title: 'Error!',
                text: error.message || 'Failed to add insurance company',
                icon: 'error',
                confirmButtonColor: '#A8916A'
            });
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="  mx-auto p-4">
            {error && (
                <div className="p-4 mb-6 bg-danger-light text-danger rounded-lg">
                    {error}
                </div>
            )}

            {loading ? (
                <div className="flex justify-center items-center h-64">
                    <div className="w-10 h-10 border-t-2 border-primary rounded-full animate-spin"></div>
                </div>
            ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                    {/* Company Information Section */}
                    <div className="p-6 bg-white rounded-lg shadow-md border border-gray-100 dark:bg-gray-900 dark:border-gray-700">
                        <h2 className="text-2xl font-semibold text-secondary dark:text-white mb-4 border-b border-primary-light pb-2">
                            Create Insurance Company
                        </h2>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {/* Company Name */}
                            <div className="w-full">
                                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                                    Company Name *
                                </label>
                                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                                    <FaBuilding className="text-primary" />
                                    <input
                                        type="text"
                                        name="company_name"
                                        value={companyData.company_name}
                                        onChange={handleChange}
                                        required
                                        className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                                        placeholder="Enter company name"
                                    />
                                </div>
                            </div>

                            {/* Insurance Type */}
                            <div className="w-full">
                                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                                    Insurance Type *
                                </label>
                                <div className="relative">
                                    <select
                                        name="insurance_type"
                                        value={companyData.insurance_type}
                                        onChange={handleChange}
                                        className="appearance-none w-full bg-gray-50 dark:bg-gray-800 dark:text-white p-2 pr-8 rounded-md border border-gray-200 dark:border-gray-700 focus:border-primary focus:ring-1 focus:ring-primary-light"
                                    >
                                        <option value="Health">Health</option>
                                        <option value="Life">Life</option>
                                        <option value="Auto">Auto</option>
                                        <option value="Property">Property</option>
                                        <option value="Travel">Travel</option>
                                    </select>
                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                        <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            {/* Contact */}
                            <div className="w-full">
                                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                                    Contact Number *
                                </label>
                                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                                    <FaPhone className="text-primary" />
                                    <input
                                        type="tel"
                                        name="contact"
                                        value={companyData.contact}
                                        onChange={handleChange}
                                        required
                                        className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                                        placeholder="Enter contact number"
                                    />
                                </div>
                            </div>

                            {/* Email */}
                            <div className="w-full">
                                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                                    Email *
                                </label>
                                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                                    <FaEnvelope className="text-primary" />
                                    <input
                                        type="email"
                                        name="email"
                                        value={companyData.email}
                                        onChange={handleChange}
                                        required
                                        className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                                        placeholder="Enter email"
                                    />
                                </div>
                            </div>

                            {/* Address */}
                            <div className="w-full md:col-span-2">
                                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                                    Address *
                                </label>
                                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                                    <FaMapMarkerAlt className="text-primary" />
                                    <input
                                        type="text"
                                        name="address"
                                        value={companyData.address}
                                        onChange={handleChange}
                                        required
                                        className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                                        placeholder="Enter address"
                                    />
                                </div>
                            </div>

                            {/* Country */}
                            <div className="w-full">
                                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                                    Country *
                                </label>
                                <div className="relative">
                                    <select
                                        name="country"
                                        value={companyData.country}
                                        onChange={handleChange}
                                        required
                                        className="appearance-none w-full bg-gray-50 dark:bg-gray-800 dark:text-white p-2 pr-8 rounded-md border border-gray-200 dark:border-gray-700 focus:border-primary focus:ring-1 focus:ring-primary-light"
                                    >
                                        <option value="">Select Country</option>
                                        {countries.map(country => (
                                            <option key={country.isoCode} value={country.name}>
                                                {country.name}
                                            </option>
                                        ))}
                                    </select>
                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                        <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            {/* State */}
                            <div className="w-full">
                                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                                    State *
                                </label>
                                <div className="relative">
                                    <select
                                        name="state"
                                        value={companyData.state}
                                        onChange={handleChange}
                                        required
                                        disabled={!companyData.country}
                                        className="appearance-none w-full bg-gray-50 dark:bg-gray-800 dark:text-white p-2 pr-8 rounded-md border border-gray-200 dark:border-gray-700 focus:border-primary focus:ring-1 focus:ring-primary-light"
                                    >
                                        <option value="">Select State</option>
                                        {states.map(state => (
                                            <option key={state.isoCode} value={state.name}>
                                                {state.name}
                                            </option>
                                        ))}
                                    </select>
                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                        <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            {/* City */}
                            <div className="w-full">
                                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                                    City *
                                </label>
                                <div className="relative">
                                    <select
                                        name="city"
                                        value={companyData.city}
                                        onChange={handleChange}
                                        required
                                        disabled={!companyData.state}
                                        className="appearance-none w-full bg-gray-50 dark:bg-gray-800 dark:text-white p-2 pr-8 rounded-md border border-gray-200 dark:border-gray-700 focus:border-primary focus:ring-1 focus:ring-primary-light"
                                    >
                                        <option value="">Select City</option>
                                        {cities.map(city => (
                                            <option key={city.name} value={city.name}>
                                                {city.name}
                                            </option>
                                        ))}
                                    </select>
                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                        <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            {/* Pincode */}
                            <div className="w-full">
                                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                                    Pincode *
                                </label>
                                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                                    <input
                                        type="text"
                                        name="pincode"
                                        value={companyData.pincode}
                                        onChange={handleChange}
                                        required
                                        className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                                        placeholder="Enter pincode"
                                    />
                                </div>
                            </div>

                            {/* Website */}
                            <div className="w-full">
                                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                                    Website
                                </label>
                                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                                    <FaGlobe className="text-primary" />
                                    <input
                                        type="url"
                                        name="website"
                                        value={companyData.website}
                                        onChange={handleChange}
                                        className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                                        placeholder="Enter website URL"
                                    />
                                </div>
                            </div>

                            {/* Status */}
                            <div className="w-full flex items-center">
                                <label className="inline-flex items-center cursor-pointer">
                                    <input
                                        type="checkbox"
                                        name="status"
                                        checked={companyData.status}
                                        onChange={handleChange}
                                        className="sr-only peer"
                                    />
                                    <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-light rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
                                    <span className="ml-3 text-sm font-medium text-secondary dark:text-gray-300">
                                        Active
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>

                    {/* Buttons */}
                    <div className="flex justify-end space-x-4">
                        <button
                            type="button"
                            onClick={() => navigate('/insurance')}
                            className="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-secondary dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                        >
                            Cancel
                        </button>
                        <button
                            type="submit"
                            disabled={loading}
                            className="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary-light focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
                        >
                            {loading ? (
                                <span className="flex items-center justify-center">
                                    <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                    </svg>
                                    Saving...
                                </span>
                            ) : (
                                'Add Company'
                            )}
                        </button>
                    </div>
                </form>
            )}
        </div>
    );
};

export default AddInsuranceCompany;