'use client';

import {useId} from 'react';

/**
 * SVG hatch patterns — the fill equivalent of a dash pattern.
 *
 * Once a bar or area chart needs a third series, luminance alone stops being
 * reliable (a mid-gray bar on a dark card is easy to confuse with its
 * neighbour). A hatch keeps the series separable without introducing hue.
 *
 * Pattern ids must be unique per chart instance, hence useId.
 */
export function useHatchIds() {
  const base = useId().replace(/:/g, '');
  return {
    diagonal: `hatch-d-${base}`,
    cross: `hatch-x-${base}`,
  };
}

export function ChartDefs({
  ids,
  colors,
}: {
  ids: {diagonal: string; cross: string};
  colors: {diagonal: string; cross: string};
}) {
  return (
    <defs>
      <pattern
        id={ids.diagonal}
        patternUnits="userSpaceOnUse"
        width={6}
        height={6}
        patternTransform="rotate(45)"
      >
        <rect width={6} height={6} fill="transparent" />
        <line x1={0} y1={0} x2={0} y2={6} stroke={colors.diagonal} strokeWidth={3} />
      </pattern>
      <pattern
        id={ids.cross}
        patternUnits="userSpaceOnUse"
        width={6}
        height={6}
      >
        <rect width={6} height={6} fill="transparent" />
        <line x1={0} y1={0} x2={0} y2={6} stroke={colors.cross} strokeWidth={2} />
        <line x1={0} y1={0} x2={6} y2={0} stroke={colors.cross} strokeWidth={2} />
      </pattern>
    </defs>
  );
}
