import styles from './styles.module.scss'

export type ColorOption =
  | 'base'
  | 'shade1'
  | 'shade2'
  | 'shade3'
  | 'contrast'
  | 'contrastShade1'

type CrossProps = {
  color?: ColorOption
}

export const Cross = ({ color = 'base' }: CrossProps) => {
  const style = styles[color]

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 39.69 49.61"
      className={style}
      height={49.61}
    >
      <polygon
        points="33.89 14.81 19.89 14.81 19.89 0.8 18.89 0.8 18.89 14.81 4.89 14.81 4.89 15.81 18.89 15.81 18.89 48.8 19.89 48.8 19.89 15.81 33.89 15.81 33.89 14.81" />
    </svg>
)
}