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

type Variant =
  | "h1"
  | "h2"
  | "h3"
  | "h4"
  | "h5"
  | "h6"
  | "subtitle1"
  | "subtitle2"
  | "body1"
  | "body2"
  | "caption"
  | "overline";

type Align = "left" | "center" | "right" | "justify";

interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
  variant?: Variant;
  align?: Align;
  color?: string;
  fontWeight?: "light" | "normal" | "medium" | "semibold" | "bold";
  gutterBottom?: boolean;
  noWrap?: boolean;
  className?: string;
  children: React.ReactNode;
  component?: React.ElementType;
}

const variantStyles: Record<Variant, string> = {
  h1: "text-5xl",
  h2: "text-4xl",
  h3: "text-3xl",
  h4: "text-2xl",
  h5: "text-xl",
  h6: "text-lg",
  subtitle1: "text-base",
  subtitle2: "text-sm",
  body1: "text-base",
  body2: "text-sm",
  caption: "text-xs",
  overline: "text-[10px] uppercase tracking-widest",
};

const variantToElement: Record<Variant, keyof JSX.IntrinsicElements> = {
  h1: "h1",
  h2: "h2",
  h3: "h3",
  h4: "h4",
  h5: "h5",
  h6: "h6",
  subtitle1: "h6",
  subtitle2: "h6",
  body1: "p",
  body2: "p",
  caption: "span",
  overline: "span",
};

const Typography: React.FC<TypographyProps> = ({
  variant = "body1",
  align = "left",
  color = "",
  fontWeight = "normal",
  gutterBottom = false,
  noWrap = false,
  className,
  component,
  children,
  ...props
}) => {
  const Tag = (component || variantToElement[variant]) as React.ElementType;

  const getColors = () => {
    if (color) {
      return color;
    } else return "text-primary-900 dark:text-dark-100";
  };

  return (
    <Tag
      className={clsx(
        "flex items-center gap-1",
        variantStyles[variant],
        color,
        getColors(),
        {
          "mb-2": gutterBottom,
          truncate: noWrap,
          "text-left": align === "right",
          "text-center": align === "center",
          "text-right": align === "left",
          "text-justify": align === "justify",
          "font-light": fontWeight === "light",
          "font-normal": fontWeight === "normal",
          "font-medium": fontWeight === "medium",
          "font-semibold": fontWeight === "semibold",
          "font-bold": fontWeight === "bold",
        },
        className
      )}
      {...props}
    >
      {children}
    </Tag>
  );
};

export default Typography;