import * as React from 'react';
import { cn } from '../../shared/utils';

export type BlockColor =
  | 'primary'
  | 'chart-1'
  | 'chart-2'
  | 'chart-3'
  | 'chart-4'
  | 'chart-5'
  | 'success'
  | 'info'
  | 'warning'
  | 'destructive';

const colorTokens: Record<BlockColor, string> = {
  primary: 'bg-primary',
  'chart-1': 'bg-[var(--chart-1)]',
  'chart-2': 'bg-[var(--chart-2)]',
  'chart-3': 'bg-[var(--chart-3)]',
  'chart-4': 'bg-[var(--chart-4)]',
  'chart-5': 'bg-[var(--chart-5)]',
  success: 'bg-success',
  info: 'bg-info',
  warning: 'bg-warning',
  destructive: 'bg-destructive',
};

export interface SectionHeadingProps {
  title: string;
  description?: string;
  /** Use 'sidebar' when this heading sits on a `bg-sidebar` surface (e.g. Methodology). */
  tone?: 'default' | 'sidebar';
  /** Optional small colored bar rendered under the title. Omit for no bar. */
  accentColor?: BlockColor;
  className?: string;
}

/**
 * Plain section header used to introduce a landing-page section.
 *
 * @description
 * Renders the section title (and optional description), with an optional
 * small colored bar under the title.
 *
 * @ai-rules
 * 1. Use `tone="sidebar"` when this heading renders on a `bg-sidebar` surface — the default tone's tokens are not guaranteed to contrast there.
 * 2. `accentColor` is optional — omit it for a plain title with no bar; when set, it maps to `colorTokens` and never hardcodes a color.
 */
export function SectionHeading({
  title,
  description,
  tone = 'default',
  accentColor,
  className,
}: SectionHeadingProps) {
  const isSidebar = tone === 'sidebar';

  return (
    <div className={className}>
      <h2 className={cn('text-2xl font-bold md:text-3xl', !isSidebar && 'text-foreground')}>
        {title}
      </h2>
      {accentColor && (
        <span
          aria-hidden="true"
          className={cn('mt-3 block h-1 w-10 rounded-full', colorTokens[accentColor])}
        />
      )}
      {description && (
        <p
          className={cn(
            'mt-6 max-w-2xl text-base',
            isSidebar ? 'text-sidebar-foreground/70' : 'text-muted-foreground'
          )}
        >
          {description}
        </p>
      )}
    </div>
  );
}