import { FC, PropsWithChildren } from 'react'
import cx from 'classnames'
import typography from '../../../styles/typography.module.css'
import styles from './Paragraph.module.css'

interface Props {
  size: 'large' | 'medium' | 'small' | 'subtitle'
}

export const Paragraph: FC<PropsWithChildren<Props>> = ({ size, children }) => {
  return (
    <p
      className={cx({
        [typography.bodyLarge]: size === 'large',
        [typography.bodyMedium]: size === 'medium',
        [typography.bodySmall]: size === 'small' || size === 'subtitle',
        [styles.subtitle]: size === 'subtitle'
      })}
    >
      {children}
    </p>
  )
}