"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { fontWeightClasses, type BaseTextProps, type TextTag, type TypographySize } from "@/utils/utils";

const fontSizeClasses: Record<TypographySize, string> = {
  title: "text-lg lg:text-3xl 2xl:text-[45px]",
  subtitle: "text-sm lg:text-base xl:text-lg",
  body: "text-base lg:text-lg xl:text-xl",
  caption: "text-xs",
  text: "text-xs md:text-sm",
  chip: "text-sm",
  base: "text-base",
  small: "text-[10px] md:text-sm",
  sm: "text-sm",
  xs:"text-[10px] md:text-xs",
  normal: "text-sm xl:text-base",
  h1: "text-[40px] sm:text-5xl xl:text-6xl 2xl:text-[75px] font-semibold",
  h2: "text-[35px] md:text-3xl xl:text-5xl 2xl:text-[58px] font-semibold",
  h3: "text-xl md:text-2xl xl:text-3xl",
  h4: "text-2xl lg:text-3xl 2xl:text-[40px]",
  h5: "text-xl lg:text-xl xl:text-2xl",
  h6: "text-xl font-semibold sm:text-2xl xl:text-[28px]",
  h7: "text-base lg:text-sm 2xl:text-lg",
  h8: "text-xs md:text-sm xl:text-base",
  h9: "text-4xl md:text-5xl xl:text-6xl 2xl:text-[70px]",
};

export const Text = React.forwardRef<HTMLElement, BaseTextProps>(
  ({ as, size = "normal", className, onClick, children, textKey,fontWeight, ...props }, ref) => {
    const Tag = as || (/^h[1-6]$/.test(size) ? (size as TextTag) : "p");

    return (
      <Tag
        ref={ref as never}
        
      className={cn(
          fontSizeClasses[size],
          fontWeight ? fontWeightClasses[fontWeight] : undefined,
          className
        )}
        onClick={onClick}
        {...props}
      >
        {textKey ?? children}
      </Tag>
    );
  },
);

Text.displayName = "Text";