import React from 'react'
import styled from 'styled-components/macro'

import { useLexicsStore } from 'features/LexicsStore'

const Text = styled.span``

type Props = {
  className?: string,
  onClick?: () => void,
  t: string | number,
}

export const T9n = ({
  className,
  onClick,
  t,
}: Props) => {
  const { translate } = useLexicsStore()

  return (
    <Text
      onClick={onClick}
      className={className}
    >
      {translate(String(t))}
    </Text>
  )
}