import React from 'react'
import { Row } from 'antd'

export enum HIGHLIGHT_MODE {
  SUCCESS = 1
}

export interface IProps {
  children: any
  mode?: HIGHLIGHT_MODE
}

const modeClasses = {
  [HIGHLIGHT_MODE.SUCCESS]: 'bg--success'
}

const Highlight = ({ children, mode }: IProps) => {
  const value = mode ? modeClasses[mode] : 'bg--grey'

  const cls = `p__x--16 p__y--8 ${value} border__radius--8 m__t--8`

  return (
    <Row align="middle" className={cls}>
      {children}
    </Row>
  )
}

export default Highlight
