import { Feather } from '@expo/vector-icons'
import { PressableOpacity } from 'src/components/common/PressableOpacity'
import type { Status } from 'src/lib/api-types'
import { ICON } from 'src/lib/icons'
import { Text, useTheme, View, XStack, YStack } from 'tamagui'

type Props = {
  status: Status | undefined
  onDismiss: () => void
}

export function QuotedStatusBanner({ status, onDismiss }: Props) {
  const theme = useTheme()
  return (
    <View
      mt="$3"
      p="$3"
      borderWidth={1}
      borderRadius={10}
      borderColor={theme.borderColor.val}
      backgroundColor={theme.backgroundTertiary.val}
    >
      <XStack alignItems="center" justifyContent="space-between" gap="$2">
        <YStack flex={1}>
          <Text fontSize="$2" color={theme.colorTertiary.val}>
            Quoting
          </Text>
          <Text fontSize="$4" fontWeight="600" color={theme.color.val} numberOfLines={1}>
            {status?.account?.acct ? `@${status.account.acct}` : 'Loading quoted post…'}
          </Text>
        </YStack>
        <PressableOpacity onPress={onDismiss} hitSlop={10}>
          <Feather name="x" size={ICON.sm} color={theme.colorSecondary.val} />
        </PressableOpacity>
      </XStack>
    </View>
  )
}
