import React from "react";
import classNames from "classnames";

export type Variant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";

interface TextProps
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {
  text: string;
  readonly variant?: Variant;
  className?: string;
  Tag?: Variant;
}

const getTextVariant = (variant: Variant) => {
  switch (variant) {
    case "h1":
      return "text-4xl font-bold";
    case "h2":
      return "text-3xl font-bold";
    case "h3":
      return "text-2xl font-bold";
    case "h4":
      return "text-xl font-bold";
    case "h5":
      return "text-lg font-bold";
    case "h6":
      return "text-md font-bold";
    case "p":
      return "text-md";
    case "span":
      return "text-sm";
    default:
      return "text-base";
  }
};

export const Text = (props: TextProps) => {
  const { variant = "p", text, className, Tag = "p" } = props;
  const textClass = classNames(getTextVariant(variant), className);

  return <Tag className={textClass}>{text}</Tag>;
};