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

export interface TextStyleProps {
  /** Give text additional visual meaning */
  variation?: 'positive' | 'negative' | 'strong' | 'subdued'
  /* Inner content of the element */
  children?: React.ReactNode
}

const styles = {
  positive: 'text-positive-text',
  negative: 'text-negative-text',
  strong: 'font-semibold',
  subdued: 'text-disabled-text'
}

export const TextStyle = ({ children, variation, ...rest }: TextStyleProps) => {
  const className = classNames(
    variation === 'positive' && styles.positive,
    variation === 'negative' && styles.negative,
    variation === 'strong' && styles.strong,
    variation === 'subdued' && styles.subdued
  )

  return (
    <span className={className} {...rest}>
      {children}
    </span>
  )
}
