export type SiteName = 'Site A' | 'Site B' | 'Site C';

interface SiteStatusProps {
    selectedSite: SiteName;
    location: string;
    inverterProvider: string;
    emergencyContact: string;
    lastSyncTimestamp: string;
}

const SiteStatus = ({
    selectedSite,
    location,
    inverterProvider,
    emergencyContact,
    lastSyncTimestamp,
}: SiteStatusProps) => {
    const statusMap: Record<SiteName, string> = {
        'Site A': 'Active',
        'Site B': 'Inactive',
        'Site C': 'Faulty',
    };

    return (
        <div className="bg-white p-4 rounded-lg shadow-md space-y-2 dark:bg-gray-800 dark:text-white-light">
            <h2 className="text-xl font-semibold mb-3">Site Details</h2>

            {/* Status */}
            <div className="flex justify-between items-center text-base">
                <p className="text-gray-600 dark:text-gray-400 font-medium">Status:</p>
                <p className={`font-semibold ${
                    statusMap[selectedSite] === 'Active' ? 'text-green-500' :
                    statusMap[selectedSite] === 'Inactive' ? 'text-orange-500' :
                    'text-red-500'
                }`}>
                    {statusMap[selectedSite]}
                </p>
            </div>

            {/* Location */}
            <div className="flex justify-between items-center text-base">
                <p className="text-gray-600 dark:text-gray-400 font-medium">Location:</p>
                <p className="font-medium">{location}</p>
            </div>

            {/* Inverter Provider */}
            <div className="flex justify-between items-center text-base">
                <p className="text-gray-600 dark:text-gray-400 font-medium">Inverter Provider:</p>
                <p className="font-medium">{inverterProvider}</p>
            </div>

            {/* Emergency Contact */}
            <div className="flex justify-between items-center text-base">
                <p className="text-gray-600 dark:text-gray-400 font-medium">Emergency Contact:</p>
                <p className="font-medium">{emergencyContact}</p>
            </div>

            {/* Last Sync */}
            <div className="flex justify-between items-center text-base">
                <p className="text-gray-600 dark:text-gray-400 font-medium">Last Sync:</p>
                <p className="font-medium">{lastSyncTimestamp}</p>
            </div>
        </div>
    );
};

export default SiteStatus;