import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { DayCount } from '../types/api';
import AreaTrendChart from './AreaTrendChart';

interface Props {
    title: string;
    data?: DayCount[];
    color: string;
    className?: string;
}

const DailyLineChartCard: React.FC<Props> = ({ title, data, color, className }) => {
    const chartData = (data ?? []).map((item) => ({
        date: item.date,
        count: item.count,
    }));

    if (chartData.length === 0) {
        return null;
    }

    return (
        <Card className={className}>
            <CardHeader>
                <CardTitle className="text-base">{title}</CardTitle>
            </CardHeader>
            <CardContent>
                <AreaTrendChart
                    data={chartData}
                    xKey="date"
                    series={[{ key: 'count', color, name: title }]}
                    height={280}
                    yAllowDecimals={false}
                />
            </CardContent>
        </Card>
    );
};

export default DailyLineChartCard;