import React from 'react'
import { classNames } from '../../../helpers'
import style from './Paragraph.module.css'

type ParagraphProps = React.HTMLAttributes<HTMLDivElement> & {
  children: React.ReactNode
  props?: React.HTMLAttributes<HTMLDivElement>
  color?: 'default' | 'primary' | 'back'
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
  weight?: 'none' | 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
  className?: string | string[]
  styles?: React.CSSProperties
}

export const Paragraph = ({
  children,
  props,
  className = '',
  weight = 'normal',
  color = 'default',
  size = 'md',
  styles
}: ParagraphProps) => {
  return (
    <p style={styles} className={classNames('paragraph', {
      [`${className}`]: className,
      [style[`size-${size}`]]: size,
      [style[`color-${color}`]]: color,
      [style[`weight-${weight}`]]: weight
    })} {...props}>
        {children}
    </p>
  )
}