UserDashboard/components/dashboards/SiteCard.tsx

// components/dashboards/SiteCard.tsx
import React from 'react';
import Link from 'next/link'; // Import Link from Next.js
import { SiteName, SiteDetails } from '@/types/SiteData'; // Adjust path as necessary

interface SiteCardProps {
    siteName: SiteName;
    details: SiteDetails;
    status: string;
}

const SiteCard: React.FC<SiteCardProps> = ({ siteName, details, status }) => {
    const statusColorClass =
        status === 'Active' ? 'text-green-500' :
        status === 'Inactive' ? 'text-orange-500' :
        'text-red-500';

    return (
        <div className="bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light flex flex-col space-y-2">
            <h3 className="text-xl font-bold text-primary-600 dark:text-primary-400 border-b pb-2 mb-2">
                {siteName}
            </h3>

            <div className="flex justify-between items-center">
                <p className="text-gray-600 dark:text-gray-400 font-medium">Status:</p>
                <p className={`font-semibold ${statusColorClass}`}>{status}</p>
            </div>

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

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

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

            <div className="flex justify-between items-center">
                <p className="text-gray-600 dark:text-gray-400 font-medium">Last Sync:</p>
                <p className="font-semibold">{details.lastSyncTimestamp}</p>
            </div>

            {/* New: View Dashboard Button */}
            <Link
                href={{
                    pathname: '/adminDashboard', // Path to your AdminDashboard page
                    query: { site: siteName }, // Pass the siteName as a query parameter
                }}
                className="mt-4 w-full text-center text-sm btn-primary" // Tailwind classes for basic button styling
            >
                View Dashboard
            </Link>
        </div>
    );
};

export default SiteCard;