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

import styles from "./Typography.module.scss";

export type TypographyProps = {
  as?: keyof JSX.IntrinsicElements;
  children: ReactNode;
  className?: string;
  weight?: "regular" | "medium" | "semiBold" | "bold";
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
  color?:
    | "default"
    | "black"
    | "white"
    | "secondary"
    | "danger"
    | "success"
    | "muted";
  align?: "center" | "left" | "right";
  style?: React.CSSProperties;
};

const sizeMap = {
  xs: "typography-xs",
  sm: "typography-sm",
  md: "typography-base",
  lg: "typography-lg",
  xl: "typography-xl",
  "2xl": "typography-2xl",
};

const weightMap = {
  regular: "font-normal",
  medium: "font-medium",
  semiBold: "font-semi-bold",
  bold: "font-bold",
};

const colorMap = {
  default: "typography-default",
  black: "typography-black",
  white: "typography-white",
  secondary: "typography-gray-600",
  danger: "typography-red-600",
  success: "typography-green-600",
  muted: "typography-gray-400",
};

export default function Typography({
  as: Component = "span",
  children,
  className,
  weight = "regular",
  size = "md",
  color = "default",
  align = "center",
  style,
}: TypographyProps) {
  return (
    <Component
      className={clsx(
        styles[sizeMap[size]],
        styles[weightMap[weight]],
        styles[colorMap[color]],
        styles.typography,
        className
      )}
      style={{
        textAlign: align,
        ...style,
      }}
    >
      {children}
    </Component>
  );
}
