import { cva } from "class-variance-authority"

import styles from "./title.module.css"

import type { HeadingProps } from "@/types/components/myPages/title"

const config = {
  variants: {
    text: {
      uppercase: styles.uppercase,
    },
    type: {
      h1: styles.h1,
      h2: styles.h2,
      h3: styles.h3,
      h4: styles.h4,
      h5: styles.h5,
      h6: styles.h6,
    },
  },
  defaultVariants: {
    type: "h1",
  },
} as const

const headingStyles = cva(styles.heading, config)

export default function Title({
  as,
  children,
  level = "h1",
  uppercase = false,
}: HeadingProps) {
  const Hx = level
  const className = headingStyles({
    text: uppercase ? "uppercase" : undefined,
    type: as ?? level,
  })
  return <Hx className={className}>{children}</Hx>
}