'use client';
import React from 'react';
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';

type ChartPoint = {
  label: string;
  sales: number;
  revenue: number;
};

export default function Chart({ data }: { data: ChartPoint[] }) {
  return (
    <div className="h-[360px]">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} margin={{ top: 24, right: 24, left: 0, bottom: 0 }}>
          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
          <XAxis dataKey="label" stroke="#64748b" tick={{ fontSize: 12 }} />
          <YAxis stroke="#64748b" tick={{ fontSize: 12 }} />
          <Tooltip formatter={(value: number) => new Intl.NumberFormat('es-VE', { style: 'currency', currency: 'VES' }).format(value)} />
          <Bar dataKey="revenue" fill="#2563eb" name="Ingresos" radius={[8, 8, 0, 0]} />
          <Bar dataKey="sales" fill="#14b8a6" name="Cupones vendidos" radius={[8, 8, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}