import React from 'react'
import '../tailwind.css'
import { classNames } from '../utils/css'

export interface TextContainerProps {
  /* Controls the font line height */
  leading?: 'normal' | 'loose' | 'tight'
  /* Controls the text alignment */
  alignment?: 'left' | 'center' | 'right' | 'justify'
  /* Inner content of the element */
  children?: React.ReactNode
}

const styles = {
  base: 'text-primary-text text-base',
  normal: 'leading-normal',
  loose: 'leading-loose',
  tight: 'leading-tight'
}

export const TextContainer = ({
  children,
  leading,
  alignment
}: TextContainerProps) => {
  const className = classNames(
    styles.base,
    !leading && leading === 'normal' && styles.normal,
    leading === 'loose' && styles.loose,
    leading === 'tight' && styles.tight,
    alignment && `text-${alignment}`
  )

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