import type { HTMLAttributes, ReactNode } from 'react';
import { cn } from '@/lib/cn';

/** Small all-caps label above a heading, with a lightning tick. */
export function Kicker({ className, children, tone = 'cyan' }: { className?: string; children: ReactNode; tone?: 'cyan' | 'violet' | 'amber' | 'lime' }) {
  const color = { cyan: 'text-cyan', violet: 'text-violet-soft', amber: 'text-amber', lime: 'text-lime' }[tone];
  return (
    <p className={cn('inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.2em] sm:text-sm', color, className)}>
      <svg viewBox="0 0 12 16" aria-hidden="true" focusable="false" className="h-3.5 w-auto fill-current">
        <path d="M7.5 0 0 9h4.5L3 16l9-10H7.2L7.5 0Z" />
      </svg>
      {children}
    </p>
  );
}

type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
type HeadingSize = 'hero' | 'display' | 'title' | 'lg' | 'md';

const headingSizes: Record<HeadingSize, string> = {
  hero: 'font-display text-hero font-extrabold',
  display: 'font-display text-display font-bold',
  title: 'font-display text-title font-bold',
  lg: 'font-display text-xl font-bold tracking-[-0.02em] sm:text-2xl',
  md: 'font-display text-lg font-semibold tracking-[-0.01em]',
};

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  as?: HeadingLevel;
  size?: HeadingSize;
}

export function Heading({ as: Tag = 'h2', size = 'title', className, ...rest }: HeadingProps) {
  return <Tag className={cn('text-fg', headingSizes[size], className)} {...rest} />;
}

export function Lead({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
  return <p className={cn('text-lg leading-relaxed text-muted sm:text-xl', className)} {...rest} />;
}

/** Kicker + heading + lead, the standard section opener. */
export function SectionHeader({
  kicker,
  title,
  lead,
  align = 'left',
  as = 'h2',
  size = 'title',
  id,
  className,
  kickerTone,
}: {
  kicker?: ReactNode;
  title: ReactNode;
  lead?: ReactNode;
  align?: 'left' | 'center';
  as?: HeadingLevel;
  size?: HeadingSize;
  /** id for the heading, so the section can be aria-labelledby it. */
  id?: string;
  className?: string;
  kickerTone?: 'cyan' | 'violet' | 'amber' | 'lime';
}) {
  return (
    <div className={cn('flex max-w-3xl flex-col gap-4', align === 'center' && 'mx-auto items-center text-center', className)}>
      {kicker && <Kicker tone={kickerTone}>{kicker}</Kicker>}
      <Heading as={as} size={size} id={id}>
        {title}
      </Heading>
      {lead && <Lead>{lead}</Lead>}
    </div>
  );
}