"use client";

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

interface Props {
  data: { date: string; taux: number }[];
}

export function OccupancyChart({ data }: Props) {
  return (
    <ResponsiveContainer width="100%" height={250}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" stroke="#E5E7EB" />
        <XAxis dataKey="date" tick={{ fontSize: 11 }} interval="preserveStartEnd" />
        <YAxis unit="%" domain={[0, 100]} tick={{ fontSize: 11 }} />
        <Tooltip
          formatter={(value: number) => [`${value}%`, "Occupation"]}
          contentStyle={{ borderRadius: 6, fontSize: 12 }}
        />
        <Bar dataKey="taux" fill="#C9A84C" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}