export const CHART_COLORS = [
  'var(--chart-1)',
  'var(--chart-2)',
  'var(--chart-3)',
  'var(--chart-4)',
  'var(--chart-5)',
  'var(--chart-6)',
  'var(--chart-7)',
  'var(--chart-8)',
]

/**
 * Pre-configured Recharts prop objects that match the design system's
 * chart styling. Used internally by ThemedChart and available for
 * consumers composing Recharts directly.
 */
export const rechartsTheme = {
  colors: CHART_COLORS,

  cartesianGrid: {
    stroke: 'var(--border-subtle)',
    strokeDasharray: '3 3',
    vertical: false,
  },

  xAxis: {
    tick: { fontSize: 9, fontFamily: 'var(--font-mono)', fill: 'var(--text-faint)' },
    axisLine: { stroke: 'var(--border-subtle)' },
    tickLine: false as const,
  },

  yAxis: {
    tick: { fontSize: 9, fontFamily: 'var(--font-mono)', fill: 'var(--text-faint)' },
    axisLine: false as const,
    tickLine: false as const,
  },

  tooltip: {
    contentStyle: {
      background: 'var(--bg-surface)',
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-sm)',
      boxShadow: 'var(--shadow-md)',
      fontSize: 11,
      padding: '6px 10px',
    },
    labelStyle: {
      color: 'var(--text-muted)',
      fontSize: 11,
      marginBottom: 4,
    },
    itemStyle: {
      color: 'var(--text-primary)',
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      padding: 0,
    },
    cursor: { stroke: 'var(--text-faint)' },
  },

  legend: {
    wrapperStyle: {
      fontSize: 11,
      color: 'var(--text-secondary)',
    },
  },
} as const
