import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Apple } from 'lucide-react';

const data = [
  { name: 'Expired', value: 30 },
  { name: 'Preparation', value: 45 },
  { name: 'Packaging', value: 25 },
];

const COLORS = ['#ef4444', '#f97316', '#eab308'];

export function FoodWasteChart() {
  return (
    <Card className="col-span-1 shadow-sm">
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <div className="flex items-center gap-2">
          <Apple className="w-5 h-5 text-green-600" />
          <CardTitle className="text-base font-semibold">Food Waste</CardTitle>
        </div>
      </CardHeader>
      <CardContent>
        <div className="text-xs text-muted-foreground mb-2">Reduction metrics and analysis</div>
        <div className="h-[140px] w-full flex items-center justify-center relative">
            <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={data}
                cx="50%"
                cy="50%"
                innerRadius={30}
                outerRadius={50}
                fill="#8884d8"
                paddingAngle={5}
                dataKey="value"
              >
                {data.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                ))}
              </Pie>
              <Tooltip />
            </PieChart>
          </ResponsiveContainer>
          <div className="absolute right-0 top-1/2 -translate-y-1/2 text-xs text-right pr-2 space-y-1">
             <div className="flex items-center justify-end gap-1"><span className="w-2 h-2 rounded-full bg-red-500"></span>Expired</div>
             <div className="flex items-center justify-end gap-1"><span className="w-2 h-2 rounded-full bg-orange-500"></span>Prep</div>
             <div className="flex items-center justify-end gap-1"><span className="w-2 h-2 rounded-full bg-yellow-500"></span>Pack</div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}