import { LinkCardProps } from '@junwon/centum/types'
import { YStack, XStack, Paragraph, isWeb } from 'tamagui'

function CardTitle({ title }: { title: string }) {
  const cardTitleStyle = isWeb
    ? {
        fontFamily: 'Spline+Sans',
        fontWeight: 500,
      }
    : { fontFamily: 'SplineSansMedium' }

  return (
    <Paragraph
      style={cardTitleStyle}
      color="#06CAEB"
      transform={[{ scaleX: 1.03 }, { scaleY: 0.97 }]}
      size="$6"
      letterSpacing={0.3}
      lineHeight={isWeb ? '$8' : '$9'}
      flex={1}
    >
      {title}
    </Paragraph>
  )
}

function CardHeadline({ headline }: { headline: string }) {
  const cardContentStyle = isWeb
    ? {
        fontFamily: 'Spline+Sans',
        fontWeight: 300,
      }
    : { fontFamily: 'SplineSansLight' }

  const truncatedHeadline = headline.length > 160 ? headline.slice(0, 160) + '...' : headline

  return (
    <Paragraph
      style={cardContentStyle}
      transform={[{ scaleX: 1.03 }, { scaleY: 0.95 }]}
      size="$5"
      letterSpacing={0.3}
      lineHeight={isWeb ? '$6' : '$8'}
    >
      {truncatedHeadline}
    </Paragraph>
  )
}

export const LinkCard: React.FC<LinkCardProps> = (props) => {
  const { title, headline, link_target_kind, link_code, onLinkPress } = props

  return (
    <YStack
      width="100%"
      gap="$1"
      onPress={() => onLinkPress?.(link_target_kind, link_code)}
    >
      <XStack
        jc="space-between"
        ai="flex-start"
        gap="$3"
      >
        <CardTitle title={title} />
      </XStack>
      <CardHeadline headline={headline} />
    </YStack>
  )
}