import styled from 'styled-components/macro'

import { useLexicsStore } from 'features/LexicsStore'
import type { LexicsId, Values } from 'features/LexicsStore/types'

const Text = styled.span``

type Props = {
  className?: string,
  id?: string,
  onClick?: () => void,
  t: LexicsId,
  values?: Values,
}

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

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