import styled from 'styled-components/macro'

import { Gender } from 'requests'

import { T9n } from 'features/T9n'

type Props = {
  className?: string,
  type: Gender,
}

const lexics = {
  [Gender.MALE]: 'gender_male',
  [Gender.FEMALE]: 'gender_female',
}

const GenderStyled = styled(T9n)<Props>`
  ${({ type }) => (
    type === Gender.MALE
      ? 'color: #1D4289;'
      : 'color: #8D2F2F;'
  )}
`

export const GenderComponent = ({ className, type }: Props) => (
  <GenderStyled
    className={className}
    type={type}
    t={lexics[type]}
  />
)
