import React from 'react'
import { Tooltip, Text, useColorMode } from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'

interface ShortTextProps {
  text: string
  maxLength?: number
}

export const ShortText = ({ text, maxLength = 30 }: ShortTextProps) => {
  const { t } = useTranslation()
  const { colorMode } = useColorMode()

  if (!text) {
    return <Text>{t('journal.pl.common.noData')}</Text>
  }

  if (text.length <= maxLength) {
    return <Text>{text}</Text>
  }

  const shortText = `${text.substring(0, maxLength)}...`

  return (
    <Tooltip 
      label={text} 
      fontSize="sm" 
      bg={colorMode === 'dark' ? 'gray.700' : 'white'}
      color={colorMode === 'dark' ? 'white' : 'gray.800'}
      boxShadow="md"
      borderRadius="md"
      p={2}
      hasArrow
    >
      <Text>{shortText}</Text>
    </Tooltip>
  )
}

export default ShortText