"use client";

import { BarChart, Bar, LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from "recharts";

interface Props {
  inventoryData: { name: string; quantity: number }[];
  consumptionData: { date: string; qty: number }[];
}

export function SiteCharts({ inventoryData, consumptionData }: Props) {
  return (
    <div className="grid grid-cols-2 gap-4">
      {inventoryData.length > 0 && (
        <div className="rounded-lg border border-neutral-200 bg-white p-5">
          <p className="text-sm font-semibold text-neutral-900 mb-4">Inventory Levels</p>
          <ResponsiveContainer width="100%" height={220}>
            <BarChart data={inventoryData} layout="vertical" margin={{ left: 8, right: 16 }}>
              <CartesianGrid strokeDasharray="3 3" horizontal={false} />
              <XAxis type="number" tick={{ fontSize: 11 }} />
              <YAxis type="category" dataKey="name" width={130} tick={{ fontSize: 11 }} />
              <Tooltip formatter={(v) => [v, "Qty"]} />
              <Bar dataKey="quantity" fill="#2563eb" radius={[0, 3, 3, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>
      )}
      {consumptionData.length > 0 && (
        <div className="rounded-lg border border-neutral-200 bg-white p-5">
          <p className="text-sm font-semibold text-neutral-900 mb-4">Daily Consumption (30 days)</p>
          <ResponsiveContainer width="100%" height={220}>
            <LineChart data={consumptionData} margin={{ left: 0, right: 16 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" tick={{ fontSize: 10 }} interval="preserveStartEnd" />
              <YAxis tick={{ fontSize: 11 }} />
              <Tooltip />
              <Line type="monotone" dataKey="qty" stroke="#16a34a" strokeWidth={2} dot={false} name="Units consumed" />
            </LineChart>
          </ResponsiveContainer>
        </div>
      )}
    </div>
  );
}