import { colors } from '@based/ui'
import type { CSSProperties, ReactNode } from 'react'

type TitleVariant =
  | 'title-medium-small'
  | 'title-bold-small'
  | 'title-bold-big'
  | 'title-bold-very-big'

const TITLE_VARIANT_STYLES: Record<TitleVariant, CSSProperties> = {
  'title-medium-small': {
    fontFamily: 'Geist',
    fontSize: 22,
    lineHeight: '100%',
    fontWeight: 500,
    fontStyle: 'normal',
  },
  'title-bold-small': {
    fontFamily: 'Geist',
    fontSize: 18,
    lineHeight: '18px',
    fontWeight: 700,
    letterSpacing: -(18 * 0.02),
  },
  'title-bold-big': {
    fontFamily: 'Geist',
    fontSize: 56,
    lineHeight: '100%',
    fontWeight: 600,
    letterSpacing: -2.24,
  },
  'title-bold-very-big': {
    fontFamily: 'Geist',
    fontSize: 72,
    lineHeight: '100%',
    fontWeight: 600,
    letterSpacing: -2.88,
  },
}

type TitleProps = {
  children: ReactNode
  variant?: TitleVariant
  align?: 'left' | 'center' | 'right'
  maxWidth?: number
  singleLine?: boolean
}

export const Title = ({
  children,
  variant = 'title-bold-big',
  align = 'left',
  maxWidth,
  singleLine,
}: TitleProps) => {
  const style: CSSProperties = {
    position: 'relative',
    textAlign: align,
    background: `linear-gradient(0deg, ${colors.neutral100} -6.6%, ${colors.neutral80} 100%)`,
    backgroundClip: 'text',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    lineHeight: 'normal',
    overflowWrap: 'break-word',
    textRendering: 'optimizeLegibility',
    WebkitFontSmoothing: 'antialiased',
    MozOsxFontSmoothing: 'grayscale',
    WebkitTextSizeAdjust: '100%',
    MozTextSizeAdjust: '100%',
    textSizeAdjust: '100%',
    userSelect: 'none',
    maxWidth: maxWidth,
    ...((singleLine || maxWidth) && {
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
    }),
    ...TITLE_VARIANT_STYLES[variant],
  }

  if (variant === 'title-bold-big' || variant === 'title-bold-very-big') {
    return <h1 style={style}>{children}</h1>
  }

  if (variant === 'title-medium-small' || variant === 'title-bold-small') {
    return <h2 style={style}>{children}</h2>
  }
}
