import { CHART_COLORS } from '../composites/_chart-utils'

/**
 * Pre-configured Recharts prop objects that match the design system's
 * chart styling. Spread these onto Recharts sub-components:
 *
 * ```tsx
 * import { rechartsTheme, CHART_COLORS } from '@cameleer/design-system'
 * import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, Legend } from 'recharts'
 *
 * <LineChart data={data}>
 *   <CartesianGrid {...rechartsTheme.cartesianGrid} />
 *   <XAxis dataKey="name" {...rechartsTheme.xAxis} />
 *   <YAxis {...rechartsTheme.yAxis} />
 *   <Tooltip {...rechartsTheme.tooltip} />
 *   <Legend {...rechartsTheme.legend} />
 *   <Line stroke={CHART_COLORS[0]} strokeWidth={2} dot={false} />
 * </LineChart>
 * ```
 */
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
