import React from 'react'

import { classNames } from '../utils/css'

import '../tailwind.css'

export interface DisplayTextProps {
  /* Controls the font size */
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
  /* Inner content of the element */
  children: React.ReactNode
}

const styles = {
  base: 'text-primary-text leading-normal',
  xs: 'text-xl',
  sm: 'text-2xl',
  md: 'text-3xl',
  lg: 'text-4xl',
  xl: 'text-5xl',
  xl2: 'text-6xl'
}

export const DisplayText = ({ children, size }: DisplayTextProps) => {
  const className = classNames(
    styles.base,
    size === 'xs' && styles.xs,
    !size || (size === 'sm' && styles.sm),
    size === 'md' && styles.md,
    size === 'lg' && styles.lg,
    size === 'xl' && styles.xl,
    size === '2xl' && styles.xl2
  )

  return <span className={className}>{children}</span>
}
