import { ReactNode } from 'react'

import styles from './Highlight.module.css'

interface HighlightProps {
  children?: ReactNode
  color?: 'primary' | 'secondary' | 'tertiary' | 'quarternary'
}

export const Highlight: React.FC<HighlightProps> = ({
  color = 'secondary',
  children,
}) => <mark className={`${styles.marker} ${styles[color]}`}>{children}</mark>
