import { classNames } from '@/lib/components/classNames';
import type { HTMLAttributes, ReactNode } from 'react';
import styles from './Typography.module.css';

export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
export type HeadingStyle = 'display' | 'section' | 'subheading';

interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  level: HeadingLevel;
  appearance?: HeadingStyle;
  children: ReactNode;
}

export function Heading({
  level,
  appearance = 'section',
  className,
  children,
  ...props
}: HeadingProps) {
  const Component = `h${level}` as const;
  return (
    <Component className={classNames(styles.heading, styles[appearance], className)} {...props}>
      {children}
    </Component>
  );
}

export function Eyebrow({ children, className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
  return (
    <p className={classNames(styles.eyebrow, className)} {...props}>
      {children}
    </p>
  );
}

export type TextVariant = 'lead' | 'body' | 'supporting' | 'caption' | 'label';

interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
  variant?: TextVariant;
  children: ReactNode;
}

export function Text({ variant = 'body', className, children, ...props }: TextProps) {
  return (
    <p className={classNames(styles.text, styles[variant], className)} {...props}>
      {children}
    </p>
  );
}

export function Quote({
  children,
  cite,
  className,
}: {
  children: ReactNode;
  cite?: string;
  className?: string;
}) {
  return (
    <figure className={classNames(styles.quote, className)}>
      <blockquote>{children}</blockquote>
      {cite ? <figcaption>{cite}</figcaption> : null}
    </figure>
  );
}
