GreenHomeUI/src/components/daily-report/SummaryCard.tsx

import { TrendingUp, TrendingDown } from 'lucide-react'
import { TemperatureGauge, HumidityGauge, LuxGauge, GasGauge } from '@/components/Gauges'
import { MiniLineChart } from '@/components/MiniChart'
import { paramConfig, toPersianDigits } from './utils'

type SummaryCardProps = {
    param: string
    currentValue: number
    minValue: number
    maxValue: number
    data: number[]
}

export function SummaryCard({ param, currentValue, minValue, maxValue, data }: SummaryCardProps) {
    const config = paramConfig[param]
    if (!config) return null
    
    // Render the appropriate gauge based on parameter type
    const renderGauge = () => {
        switch (param) {
            case 'temperature':
                return <TemperatureGauge value={currentValue} min={-20} max={80} />
            case 'humidity':
                return <HumidityGauge value={currentValue} type="air" />
            case 'soil':
                return <HumidityGauge value={currentValue} type="soil" />
            case 'lux':
                return <LuxGauge value={600} max={2000} />
            case 'gas':
                return <GasGauge value={currentValue} max={100} />
            default:
                return null
        }
    }
    
    return (
        <div className={`${config.bgColor} rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden`}>
            {/* Header */}
            <div className="px-4 pt-3 pb-1">
                <h3 className="text-sm font-bold text-gray-800">{config.title}</h3>
            </div>
            
            {/* Main Content - Gauge on left, Stats on right */}
            <div className="px-3">
                <div className="flex items-center justify-between gap-2">
                    {/* Gauge on left */}
                    <div className="flex-shrink-0">
                        {renderGauge()}
                    </div>
                    
                    {/* Stats on right - stacked */}
                    <div className="flex flex-col gap-1.5">
                        <div className="flex items-center gap-1.5 bg-white/60 rounded-md px-2 py-1.5">
                            <TrendingUp className="w-3.5 h-3.5 text-green-600 flex-shrink-0" />
                            <div className="flex flex-col">
                                <span className="text-[10px] text-gray-500 leading-tight">حداکثر</span>
                                <span className="text-xs font-bold text-gray-800 leading-tight">
                                    {toPersianDigits(maxValue.toFixed(1))} {config.unit}
                                </span>
                            </div>
                        </div>
                        <div className="flex items-center gap-1.5 bg-white/60 rounded-md px-2 py-1.5">
                            <TrendingDown className="w-3.5 h-3.5 text-red-600 flex-shrink-0" />
                            <div className="flex flex-col">
                                <span className="text-[10px] text-gray-500 leading-tight">حداقل</span>
                                <span className="text-xs font-bold text-gray-800 leading-tight">
                                    {toPersianDigits(minValue.toFixed(1))} {config.unit}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            {/* Mini Chart */}
            <div className="h-14">
                <MiniLineChart data={data} color={config.chartColor} />
            </div>
        </div>
    )
}