// components/WebVitalsCard.tsx
'use client'

interface WebVitalsCardProps {
    title: string
    value: number | null
    unit: string
    description: string
    thresholds: {
        good: number
        needsImprovement: number
    }
}

export function WebVitalsCard({ title, value, unit, description, thresholds }: WebVitalsCardProps) {
    const getStatusColor = () => {
        if (value === null) return 'bg-gray-100 border-gray-200'
        if (value <= thresholds.good) return 'bg-green-50 border-green-200'
        if (value <= thresholds.needsImprovement) return 'bg-yellow-50 border-yellow-200'
        return 'bg-red-50 border-red-200'
    }

    const getStatusText = () => {
        if (value === null) return 'Not measured'
        if (value <= thresholds.good) return 'Good'
        if (value <= thresholds.needsImprovement) return 'Needs Improvement'
        return 'Poor'
    }

    const getStatusColorBadge = () => {
        if (value === null) return 'bg-gray-200 text-gray-700'
        if (value <= thresholds.good) return 'bg-green-200 text-green-800'
        if (value <= thresholds.needsImprovement) return 'bg-yellow-200 text-yellow-800'
        return 'bg-red-200 text-red-800'
    }

    const formattedValue = value !== null ? value.toFixed(2) : '—'

    return (
        <div className={`rounded-lg border p-6 shadow-sm ${getStatusColor()}`}>
            <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
                <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColorBadge()}`}>
                    {getStatusText()}
                </span>
            </div>

            <div className="mb-4">
                <span className="text-4xl font-bold text-gray-900">{formattedValue}</span>
                <span className="ml-2 text-gray-600">{unit}</span>
            </div>

            <p className="text-sm text-gray-600 mb-4">{description}</p>

            <div className="space-y-2">
                <div className="flex justify-between text-xs">
                    <span className="text-green-600">Good</span>
                    <span className="text-yellow-600">Needs Improvement</span>
                    <span className="text-red-600">Poor</span>
                </div>
                <div className="h-2 rounded-full bg-gray-200 overflow-hidden">
                    <div
                        className="h-full bg-gradient-to-r from-green-500 via-yellow-500 to-red-500"
                        style={{ width: '100%' }}
                    />
                </div>
                <div className="flex justify-between text-xs text-gray-500">
                    <span>≤ {thresholds.good}{unit}</span>
                    <span>≤ {thresholds.needsImprovement}{unit}</span>
                    <span>&gt; {thresholds.needsImprovement}{unit}</span>
                </div>
            </div>
        </div>
    )
}