lti-web-client/src/components/pages/dashboard/chart/EggWeightBarChart.tsx

'use client';

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Cell,
} from 'recharts';
import { DashboardProductionEggWeights } from '@/types/api/dashboard/dashboard-production';

interface EggWeightBarChartProps {
  data?: DashboardProductionEggWeights[];
}

const EggWeightBarChart = ({ data }: EggWeightBarChartProps) => {
  // Show loading state if no data
  if (!data || data.length === 0) {
    return (
      <div className='w-full h-full'>
        <h3 className='text-lg font-semibold mb-4'>
          Rata-rata Berat Telur (EW)
        </h3>
        <div className='flex items-center justify-center h-[350px]'>
          <p className='text-gray-500'>Memuat data...</p>
        </div>
      </div>
    );
  }

  return (
    <div className='w-full h-full'>
      <h3 className='text-lg font-semibold mb-4'>Rata-rata Berat Telur (EW)</h3>
      <ResponsiveContainer width='100%' height={350}>
        <BarChart
          data={data}
          margin={{
            top: 5,
            right: 30,
            left: 0,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
          <XAxis
            dataKey='flock.name'
            tick={{ fontSize: 12 }}
            tickLine={false}
            axisLine={{ stroke: '#e5e7eb' }}
          />
          <YAxis
            tick={{ fontSize: 12 }}
            tickLine={false}
            axisLine={{ stroke: '#e5e7eb' }}
            domain={[0, 'auto']}
            label={{
              value: 'Berat (gram)',
              angle: -90,
              position: 'insideLeft',
              style: { fontSize: 12 },
            }}
          />
          <Tooltip
            contentStyle={{
              backgroundColor: 'white',
              border: '1px solid #e5e7eb',
              borderRadius: '8px',
              padding: '8px 12px',
            }}
            formatter={(value: number | undefined) =>
              value !== undefined ? [`${value} gram`, ''] : ['', '']
            }
            cursor={{ fill: 'rgba(59, 130, 246, 0.1)' }}
          />
          <Bar dataKey='weight' radius={[8, 8, 0, 0]}>
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill='#3b82f6' />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
};

export default EggWeightBarChart;