import { Box, Typography } from '@mui/material'
import { styles } from '../styles'
import { SmartTooltip } from '../../../components'
import type { ReactNode } from 'react'
import type { WrapperOptionsProps } from '../types'

/**
 * Renders the widget title text inside the wrapper header with smart tooltip support for truncated titles.
 */
export function Title({
  label,
  children,
}: {
  children: ReactNode
  label?: NonNullable<WrapperOptionsProps['labels']>['title']
}) {
  return (
    <SmartTooltip
      title={label ?? (typeof children === 'string' ? children : '')}
    >
      {({ ref }) => (
        <Box sx={styles.title.container}>
          <Typography
            sx={styles.title.text}
            ref={ref}
            variant='subtitle1'
            textTransform='none'
          >
            {children}
          </Typography>
        </Box>
      )}
    </SmartTooltip>
  )
}