'use client';

import React from 'react';
import DashboardLayout from '../adminDashboard/dashlayout';
import SiteCard from '@/components/dashboards/SiteCard'; // Import the new SiteCard component
import { mockSiteData, SiteName } from '@/types/SiteData'; // Import your mock data and SiteName type

const SitesPage = () => {
    // Helper function to determine status (can be externalized if used elsewhere)
    const getSiteStatus = (siteName: SiteName): string => {
        const statusMap: Record<SiteName, string> = {
            'Site A': 'Active',
            'Site B': 'Inactive',
            'Site C': 'Faulty',
        };
        return statusMap[siteName];
    };

    return (
        <DashboardLayout>
            <div className="p-6 space-y-6">
                <h1 className="text-2xl font-bold mb-6 dark:text-white-light">All Sites Overview</h1>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {/* Iterate over the keys of mockSiteData (which are your SiteNames) */}
                    {Object.keys(mockSiteData).map((siteNameKey) => {
                        const siteName = siteNameKey as SiteName; // Cast to SiteName type
                        const siteDetails = mockSiteData[siteName];
                        const siteStatus = getSiteStatus(siteName);

                        return (
                            <SiteCard
                                key={siteName} // Important for React list rendering
                                siteName={siteName}
                                details={siteDetails}
                                status={siteStatus}
                            />
                        );
                    })}
                </div>
            </div>
        </DashboardLayout>
    );
};

export default SitesPage;