Section heading

import { cva, type VariantProps } from 'class-variance-authority';
import type { ReactNode } from 'react';
import { Bracketed } from '@/components/ds/bracketed';
import { cn } from '@/lib/utils';

// @fast-ds [email protected]

const titleVariants = cva(
  // `em` inside a title is the brand emphasis: upright, in the accent — never italic.
  'font-display text-foreground [&_em]:not-italic [&_em]:text-brand',
  {
    variants: {
      size: {
        sm: 'text-3xl md:text-4xl',
        md: 'text-4xl md:text-6xl',
        lg: 'text-5xl md:text-display-2',
        xl: 'text-5xl md:text-7xl lg:text-display-1',
      },
      variant: {
        solid: '',
        /** The web site's outlined twin: a stroke and no fill. */
        outline: 'text-outline',
      },
    },
    defaultVariants: { size: 'md', variant: 'solid' },
  },
);

export type SectionHeadingProps = VariantProps<typeof titleVariants> & {
  title: ReactNode;
  eyebrow?: ReactNode;
  description?: ReactNode;
  /** Frame the title in corner ticks. On by default — the brand's heading. */
  framed?: boolean;
  align?: 'start' | 'center';
  as?: 'h1' | 'h2' | 'h3';
  className?: string;
};

/**
 * The heading a section opens with: a small eyebrow, the title in the display voice framed by
 * corner ticks, and an optional line of description. Wrap a word of the title in `<em>` to set it
 * in the accent.
 */
export function SectionHeading({
  title,
  eyebrow,
  description,
  framed = true,
  align = 'start',
  as: Heading = 'h2',
  size,
  variant,
  className,
}: SectionHeadingProps) {
  const heading = (
    <Heading className={cn(titleVariants({ size, variant }), 'leading-[0.95]')}>{title}</Heading>
  );

  return (
    <div
      className={cn(
        'flex flex-col gap-4',
        align === 'center' && 'items-center text-center',
        className,
      )}
    >
      {eyebrow && <span className="text-eyebrow uppercase text-muted-foreground">{eyebrow}</span>}
      {framed ? <Bracketed>{heading}</Bracketed> : heading}
      {description && (
        <p className="max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
          {description}
        </p>
      )}
    </div>
  );
}