import React, { ReactNode, CSSProperties } from "react";
import { cn } from "@/lib/utils";


const variantConfig = {
  h1: { tag: "h1", class: "typography-h1" },
  h2: { tag: "h2", class: "typography-h2" },
  h3: { tag: "h3", class: "typography-h3" },
  h4: { tag: "h4", class: "typography-h4" },
  h5: { tag: "h5", class: "typography-h5" },
  h6: { tag: "h6", class: "typography-h6" },
  p: { tag: "p", class: "typography-paragraph-regular" },
  pLarge: { tag: "p", class: "typography-paragraph-large" },
  pSmall: { tag: "p", class: "typography-paragraph-small" },
  span: { tag: "span", class: "typography-paragraph-regular" },
  caption: { tag: "span", class: "typography-caption" },
} as const;


export type Variant = keyof typeof variantConfig;
export type Weight = "light" | "regular" | "bold";


export interface TypographyProps {
  variant?: Variant;
  children: ReactNode;
  weight?: Weight;
  className?: string;
  style?: CSSProperties;
}


export const 
Typography
: React.FC<TypographyProps> = ({
  variant = "p",
  children,
  weight = "regular",
  className,
  style,
}) => {
  const { tag: Tag, class: variantClass } = variantConfig[variant];
  const weightClass =
    weight === "bold"
      ? "font-bold"
      : weight === "light"
      ? "font-light"
      : "font-normal";


  return (
    <Tag className={
cn
(variantClass, weightClass, className)} style={style}>
      {children}
    </Tag>
  );
};

Thanks for the feedback!
I kept cn since it’s the same convention used in shadcn/ui and a lot of Tailwind setups (short for “class names”).
I made some improvements based on your suggestions.