import React from "react"
import * as classNames from 'classnames'
import * as styles from './styles.module.scss'

export enum Element {
  Div = "div",
  H1 = "h1",
  H2 = "h2",
  H3 = "h3",
  H4 = "h4",
  H5 = "h5",
  H6 = "h6",
  P = "p",
  Small = "small",
  Span = "span",
}

export enum Size {
  Eyebrow1 = "eyebrow1",
  Eyebrow2 = "eyebrow2",
  Eyebrow3 = "eyebrow3",
  GridItemTitle = "gridItemTitle",
  H1 = "h1",
  H2 = "h2",
  H3 = "h3",
  H4 = "h4",
  H5 = "h5",
  H6 = "h6",
  P1 = "p1",
  P2 = "p2",
  P3 = "p3",
  P4 = "p4",
  P5 = "p5",
  P6 = "p6",
  Tag1 = "tag1",
  Tag2 = "tag2",
}

export enum LineHeight {
  Prose = "prose",
  Solid = "solid",
  Title = "title",
}

export enum Color {
  Faded1 = "faded1",
  Faded2 = "faded2",
  Faded3 = "faded3",
}

export enum Measure {
  Normal = "normal",
  Wide = "wide",
  Narrow = "narrow",
}

interface IProps {
  children: string | React.ReactNode
  className?: string
  color?: Color
  element?: Element
  lineHeight?: LineHeight
  measure?: Measure
  size: Size
}

const Text = ({ children, color, className, element, lineHeight, measure, size }: IProps) => {
  const DynamicElement = element ? element : "span"
  return (
    <DynamicElement
      className={classNames({
        [className]: !!className,
        [styles[color]]: color,
        [styles[lineHeight]]: lineHeight,
        [styles[measure]]: measure,
        [styles[size]]: size,
      })}
    >
      {children}
    </DynamicElement>
  )
}

export default Text
