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

type MonthlyUserData = {
  interval: string;
  newUsers: number;
};

const NewUsersChart = ({ data }: { data: MonthlyUserData[] }) => {
  return (
    <ResponsiveContainer width="100%" height={260}>
      <BarChart
        className="w-full h-full"
        data={data}
        margin={{ top: 2, right: 0, bottom: 0, left: 0 }}
      >
        <Bar dataKey="newUsers" fill="#8884d8" />
        <XAxis
          dataKey="interval"
          height={60}
          tick={{ fontSize: 12 }}
        />
        <YAxis />
        <Tooltip />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default NewUsersChart;