'use client';

import { cn } from '@/lib/utils/cn';
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';

type RateChartProps = {
  value: number;
  className?: string;
  fillColor?: string;
  emptyColor?: string;
  hideValue?: boolean;
};

export function RateChart({
  value,
  className,
  fillColor = '#0071bc',
  emptyColor = '#dbe0eb',
  hideValue = false
}: RateChartProps) {
  const data = [
    { name: 'filled', value },
    { name: 'empty', value: 100 - value }
  ];
  const colors = [fillColor, emptyColor];

  return (
    <div className={cn('relative size-34', className)}>
      <ResponsiveContainer width='100%' height='100%'>
        <PieChart>
          <Pie
            data={data}
            innerRadius='54%'
            outerRadius='100%'
            dataKey='value'
            startAngle={270}
            endAngle={-90}
          >
            {data.map((_, index) => (
              <Cell
                key={`cell-${index}`}
                fill={colors[index % colors.length]}
                stroke='transparent'
              />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
      {!hideValue && (
        <div className='absolute inset-0 flex items-center justify-center text-lg text-neutral-600'>
          {value}%
        </div>
      )}
    </div>
  );
}