import { JSX, ReactNode } from "react";
import clsx from "clsx";

type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "b1" | "b2" | "b3";

interface TypographyProps {
  children: ReactNode;
  variant?: TypographyVariant;
  color?: string;
  className?: string;
}

const variantStyles: Record<TypographyVariant, string> = {
  h1: "text-4xl font-bold leading-tight",
  h2: "text-3xl font-bold leading-tight",
  h3: "text-2xl font-semibold leading-snug",
  h4: "text-xl font-semibold leading-snug",
  h5: "text-lg font-medium leading-normal",
  b1: "text-base font-normal leading-relaxed",
  b2: "text-sm font-normal leading-relaxed",
  b3: "text-xs font-normal leading-relaxed",
};

const variantTags: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {
  h1: "h1",
  h2: "h2",
  h3: "h3",
  h4: "h4",
  h5: "h5",
  b1: "p",
  b2: "p",
  b3: "p",
};

export function Typography({
  children,
  variant = "b1",
  color,
  className,
}: TypographyProps) {
  const Component = variantTags[variant] as React.ElementType;

  return (
    <Component
      className={clsx(variantStyles[variant], className)}
      style={color ? { color } : undefined}
    >
      {children}
    </Component>
  );
}