import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts';

type Props = {
  data: { name: string; count: number }[];
  xlabel: string;
  ylabel: string;
};

export default function SupplierRequestChart({ data, xlabel, ylabel }: Props) {
  return (
    <ResponsiveContainer width='100%' height='100%'>
      <BarChart
        layout='vertical'
        margin={{ top: 10, right: 30, left: 100, bottom: 80 }}
        data={data}
      >
        <XAxis
          dataKey='count'
          type='number'
          allowDecimals={false}
          stroke='#000'
          label={{
            value: xlabel,
            position: 'bottom',
            fill: '#000',
          }}
        />
        <YAxis
          dataKey='name'
          type='category'
          stroke='#000'
          label={{
            value: ylabel,
            angle: -90,
            position: 'left',
            fill: '#000',
            offset: 85, // Horizontal offset
            dy: -20,
          }}
        />
        <Bar dataKey='count' fill='#8884d8' label='count' />
      </BarChart>
    </ResponsiveContainer>
  );
}