import type { Theme } from '@/styles/theme';
import { getChartAxisColors } from '@/features/dashboard/utils/chartColors';
import { truncateChartLabel } from '@/features/dashboard/components/charts/chartTheme';

interface CategoryAxisTickProps {
  x?: string | number;
  y?: string | number;
  payload?: { value?: string };
  theme: Theme;
  maxLength?: number;
}

export function CategoryAxisTick({
  x = 0,
  y = 0,
  payload,
  theme,
  maxLength = 18,
}: CategoryAxisTickProps) {
  const colors = getChartAxisColors(theme);
  const label = truncateChartLabel(String(payload?.value ?? ''), maxLength);
  const tickX = typeof x === 'number' ? x : Number(x) || 0;
  const tickY = typeof y === 'number' ? y : Number(y) || 0;

  return (
    <text
      x={tickX}
      y={tickY}
      dy={4}
      textAnchor="end"
      fill={colors.tick}
      fontSize={11}
      fontWeight={500}
    >
      {label}
    </text>
  );
}