"use client";

import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { Card, CardContent, CardHeader } from "@/components/ui/card";

type BarDataPoint = {
  name: string;
  value: number;
};

type ModuleBarsCardProps = {
  data: BarDataPoint[];
};

export function ModuleBarsCard({ data }: ModuleBarsCardProps) {
  return (
    <Card>
      <CardHeader>
        <h3 className="text-base font-semibold text-[#22314b]">Comparativo de Modulos</h3>
      </CardHeader>
      <CardContent>
        <div className="h-72 w-full">
          <ResponsiveContainer>
            <BarChart data={data}>
              <CartesianGrid strokeDasharray="3 3" stroke="#ecf1f8" />
              <XAxis dataKey="name" tick={{ fill: "#5f6b84", fontSize: 12 }} />
              <YAxis tick={{ fill: "#5f6b84", fontSize: 12 }} />
              <Tooltip />
              <Bar dataKey="value" fill="#0f2a5f" radius={[6, 6, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}
