`src/components/charts/ConditionBreakdown.tsx`

85 lines
'use client';

import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend } from 'recharts';

interface ConditionData {
  condition: string;
  count: number;
  avg_price?: number;
}

interface ConditionBreakdownProps {
  data: ConditionData[];
  title?: string;
}

const CONDITION_COLORS: Record<string, string> = {
  'new_unworn': '#22c55e',
  'mint': '#4ade80',
  'excellent': '#86efac',
  'very_good': '#c89b3c',
  'good': '#f59e0b',
  'fair': '#f97316',
  'poor': '#ef4444',
  'parts_only': '#64748b',
  'unknown': '#334155',
};

const CustomTooltip = ({ active, payload }: any) => {
  if (!active || !payload?.length) return null;
  const d = payload[0].payload;
  return (
    <div className="bg-navy-800 border border-navy-600 rounded-lg p-3 shadow-xl">
      <p className="text-sm font-medium text-white">{d.condition.replace(/_/g, ' ')}</p>
      <p className="text-xs text-navy-300">{d.count} listings</p>
      {d.avg_price && (
        <p className="text-xs text-omega-400">Avg: ${d.avg_price.toLocaleString()}</p>
      )}
    </div>
  );
};

export default function ConditionBreakdown({ data, title }: ConditionBreakdownProps) {
  if (!data?.length) {
    return (
      <div className="bg-navy-800/50 rounded-xl border border-navy-700 p-8 text-center">
        <p className="text-navy-400">No condition data available</p>
      </div>
    );
  }

  return (
    <div className="bg-navy-800/50 rounded-xl border border-navy-700 p-4">
      {title && <h3 className="text-lg font-semibold text-white mb-4">{title}</h3>}
      <ResponsiveContainer width="100%" height={300}>
        <PieChart>
          <Pie
            data={data}
            dataKey="count"
            nameKey="condition"
            cx="50%"
            cy="50%"
            outerRadius={100}
            innerRadius={50}
            strokeWidth={2}
            stroke="#0f172a"
          >
            {data.map((entry, i) => (
              <Cell
                key={i}
                fill={CONDITION_COLORS[entry.condition] || '#64748b'}
              />
            ))}
          </Pie>
          <Tooltip content={<CustomTooltip />} />
          <Legend
            formatter={(value: string) => (
              <span className="text-xs text-navy-300">{value.replace(/_/g, ' ')}</span>
            )}
          />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}