gui/apps/gui.hanzo.ai/features/site/header/TooltipLabelLarge.tsx

import type { Href } from 'one'
import { H2, Paragraph, XStack, YStack } from '@hanzo/gui'
import { Link } from '../../../components/Link'

export const TooltipLabelLarge = ({
  title,
  subtitle,
  icon,
  href,
}: {
  href?: string
  icon: any
  title: string
  subtitle: string
}) => {
  const content = (
    <YStack
      cursor={href ? 'pointer' : 'default'}
      flex={1}
      flexBasis="auto"
      py="$2.5"
      px="$3"
      rounded="$4"
    >
      <XStack $gtXs={{ justify: 'center' }} items="center" gap="$3">
        <H2 fontFamily="$mono" fontWeight="600" size="$5">
          {title}
        </H2>
        <YStack scale={0.7} y={0.5}>
          {icon}
        </YStack>
      </XStack>

      <Paragraph
        $gtXs={{ text: 'center' }}
        fontFamily="$mono"
        $platform-web={{
          textWrap: 'balance',
        }}
        color="$color8"
        flex={1}
        size="$4"
        lineHeight="$3"
        letterSpacing={-0.5}
      >
        {subtitle}
      </Paragraph>
    </YStack>
  )

  if (!href) {
    return content
  }

  return (
    <Link asChild delayNavigate href={href as Href}>
      {content}
    </Link>
  )
}