"use client";

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

export type BedOccupancyDatum = {
  label: string;
  count: number;
};

type BedOccupancyChartProps = {
  data: BedOccupancyDatum[];
};

export function BedOccupancyChart({ data }: BedOccupancyChartProps): React.ReactElement {
  return (
    <div className="h-64 w-full">
      <ResponsiveContainer height="100%" width="100%">
        <BarChart data={data} margin={{ bottom: 8, left: -18, right: 8, top: 8 }}>
          <CartesianGrid strokeDasharray="3 3" vertical={false} />
          <XAxis dataKey="label" tickLine={false} />
          <YAxis allowDecimals={false} tickLine={false} />
          <Tooltip cursor={{ fill: "rgba(15, 23, 42, 0.06)" }} />
          <Bar dataKey="count" fill="var(--primary)" radius={[6, 6, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}