import React from 'react'
import { CustomTitle } from './styled'
import { classNames } from '../../../helpers'
import style from './Title.module.css'

export type TitleSize =
  | 'xs'
  | 'sm'
  | 'md'
  | 'lg'
  | 'xl'
  | 'xxl'
  | '2xs'
  | '2xl'
  | '3xl'
  | '5xl'
  | '6xl'
  | '9xl'
  | '10xl'
  | 'md2'
export type TitleLineHeight =
  | 'none'
  | 'xs'
  | '2xs'
  | 'sm'
  | 'md'
  | 'lg'
  | 'xl'
  | '2xl'
  | '3xl'
  | '4xl'
  | '5xl'
  | '6xl'
  | '9xl'
  | '10xl'

export type TitleWeight =
  | 'none'
  | 'hairline'
  | 'thin'
  | 'light'
  | 'normal'
  | 'medium'
  | 'semibold'
  | 'bold'
  | 'extrabold'
  | 'black'
export type TitleFont = 'regular' | 'medium' | 'bold' | 'light' | string

interface TitleProps {
  as?: string
  children: React.ReactNode
  className?: string | string[]
  color?:
  | 'default'
  | 'primary'
  | 'blue'
  | 'white'
  | 'gray'
  | 'gray-dark'
  | 'green'
  lineHeight?: TitleLineHeight
  size?: TitleSize
  font?: TitleFont
  customSize?: string | TitleSize
  weight?: TitleWeight
  title?: string
  styles?: React.CSSProperties
  align?: 'start' | 'center' | 'end'
}

export const Title: React.FC<TitleProps> = ({
  children,
  color = 'default',
  size = '',
  align = 'start',
  font = '',
  weight = 400,
  className = '',
  title = '',
  lineHeight,
  as: Component = 'span',
  styles = {},
  customSize = ''
}) => {
  const TitleStyle = {
    fontSize: size ?? customSize,
    ...styles
  }
  const combinedClasses = Array.isArray(className)
    ? className.filter(Boolean).join(' ')
    : String(className)

  return (
    <CustomTitle
      title={title}
      font={font}
      as={Component}
      className={classNames('Title', {
        [`${combinedClasses}`]: combinedClasses,
        [style[`size-${size}`]]: size,
        [style[`color-${color}`]]: color,
        [style[`weight-${weight}`]]: weight,
        [style[`font-${font}`]]: font,
        [style[`align-${align}`]]: align,
        [style[`line-height-${lineHeight}`]]: lineHeight
      })}
      style={TitleStyle}
    >
      {children}
    </CustomTitle>
  )
}