import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from 'recharts';
import { ExposurePoint } from '../types';

interface ExposureChartProps {
  data: ExposurePoint[];
}

const ExposureChart: React.FC<ExposureChartProps> = ({ data }) => {
  const isHigh = data.length > 0 && data[data.length - 1].exposure > 25000;
  const mainColor = isHigh ? '#ef4444' : '#06b6d4';

  return (
    <div className="w-full h-[300px]">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={data}>
          <defs>
            <linearGradient id="colorExposure" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={mainColor} stopOpacity={0.3}/>
              <stop offset="95%" stopColor={mainColor} stopOpacity={0}/>
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" stroke="#334155" vertical={false} opacity={0.3} />
          <XAxis 
            dataKey="time" 
            stroke="#64748b" 
            fontSize={10} 
            tickLine={false}
            axisLine={false}
            interval="preserveStartEnd"
          />
          <YAxis 
            stroke="#64748b" 
            fontSize={10} 
            tickLine={false}
            axisLine={false}
            tickFormatter={(value) => `$${value/1000}k`}
          />
          <Tooltip 
            contentStyle={{ backgroundColor: '#0f172a', border: '1px solid #334155', borderRadius: '8px', color: '#fff' }}
            itemStyle={{ color: mainColor }}
            labelClassName="text-slate-500 font-mono text-[10px]"
          />
          <ReferenceLine y={25000} stroke="#ef4444" strokeDasharray="3 3" />
          <Area 
            type="monotone" 
            dataKey="exposure" 
            stroke={mainColor} 
            strokeWidth={2.5}
            fillOpacity={1} 
            fill="url(#colorExposure)" 
            isAnimationActive={false}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
};

export default ExposureChart;