import { Feather } from '@expo/vector-icons'
import { router } from 'expo-router'
import { Pressable } from 'react-native'
import type { Status } from 'src/lib/api-types'
import { ICON } from 'src/lib/icons'
import { Text, useTheme, View, XStack, YStack } from 'tamagui'

type ArticleCardProps = {
  post: Status
}

export default function ArticleCard({ post }: ArticleCardProps) {
  const theme = useTheme()
  const article = post.pf_article
  if (!article) return null

  const openTarget = () => {
    router.push(`/article/${post.id}`)
  }

  const authorLine = article.authors
    ?.map((a) => a.display_name || a.acct)
    .filter(Boolean)
    .join(', ')

  return (
    <Pressable onPress={openTarget} hitSlop={4}>
      <View
        borderWidth={1}
        borderColor={theme.borderColor.val}
        borderRadius={12}
        overflow="hidden"
        marginHorizontal={10}
        marginVertical={8}
        padding={12}
        backgroundColor={theme.background.val}
      >
        <YStack gap="$2">
          <XStack alignItems="center" gap="$2">
            <Feather name="file-text" size={ICON.xs} color={theme.colorTertiary.val} />
            <Text fontSize="$2" color={theme.colorTertiary.val}>
              Article
            </Text>
          </XStack>
          <Text fontSize="$5" fontWeight="bold" color={theme.color.val} numberOfLines={3}>
            {article.name}
          </Text>
          {authorLine ? (
            <Text fontSize="$3" color={theme.colorSecondary.val} numberOfLines={1}>
              {authorLine}
            </Text>
          ) : null}
          {article.reading_time_minutes ? (
            <Text fontSize="$2" color={theme.colorTertiary.val}>
              {article.reading_time_minutes} min read
            </Text>
          ) : null}
        </YStack>
      </View>
    </Pressable>
  )
}
