import { memo, useMemo } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { Card } from '@/components/ui/card';
import { getCreditScoreTrend } from '@/lib/mockData';

interface CreditScoreTrendChartProps {
  creditScore: number;
  compact?: boolean;
}

export const CreditScoreTrendChart = memo(({ creditScore, compact = false }: CreditScoreTrendChartProps) => {
  const creditTrend = useMemo(() => getCreditScoreTrend(creditScore), [creditScore]);

  return (
    <Card className={`p-4 ${compact ? '' : 'h-[280px]'}`}>
      <h3 className="text-lg font-semibold mb-2 text-foreground">Credit Score Trend (6M)</h3>
      <ResponsiveContainer width="100%" height={200}>
        <LineChart data={creditTrend}>
          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
          <XAxis dataKey="month" stroke="#6b7280" style={{ fontSize: '12px' }} />
          <YAxis stroke="#6b7280" style={{ fontSize: '12px' }} domain={[600, 850]} />
          <Tooltip />
          <Line 
            type="monotone" 
            dataKey="score" 
            stroke="#16A34A" 
            strokeWidth={2} 
            dot={{ fill: '#16A34A', r: 4 }} 
          />
        </LineChart>
      </ResponsiveContainer>
    </Card>
  );
});

CreditScoreTrendChart.displayName = 'CreditScoreTrendChart';