import Feather from '@expo/vector-icons/Feather'
import { Stack, useRouter } from 'expo-router'
import { SafeAreaView } from 'react-native-safe-area-context'
import { ICON } from 'src/lib/icons'
import { Button, Separator, Text, useTheme, YStack } from 'tamagui'

type Props = {
  objectType: 'post' | 'profile'
}

export function ReportSentScreen({ objectType }: Props) {
  const router = useRouter()
  const theme = useTheme()

  const label = objectType === 'post' ? 'Post' : 'Profile'

  return (
    <SafeAreaView style={{ backgroundColor: theme.background.val }}>
      <Stack.Screen options={{ title: 'Report Sent', headerBackTitle: 'Back' }} />
      <YStack flexGrow={1} justifyContent="center" alignItems="center" px="$6" gap="$9">
        <Text fontSize="$9" fontWeight="bold" color="$color">
          Reported {label}
        </Text>
        <Feather name="check-circle" color={theme.colorSuccess.val} size={ICON.empty} />
        <Text fontSize="$8" color="$color" textAlign="center">
          Thanks for keeping our community safe!
        </Text>
      </YStack>
      <YStack
        flexShrink={1}
        justifyContent="center"
        alignItems="flex-start"
        p="$6"
        gap="$3"
      >
        <Text fontSize="$6" color="$colorSecondary" textAlign="left">
          All reports are subject to review by our mod team.
        </Text>
        <Text fontSize="$4" color="$colorSecondary" textAlign="left">
          Please be aware that making false reports could lead to the suspension of your
          account. If our mod team needs additional information, they may contact you.
        </Text>
      </YStack>
      <YStack flexShrink={1} justifyContent="center" alignItems="center" gap="$5">
        <Separator alignSelf="stretch" />
        <Button
          mx="$6"
          onPress={() => router.back()}
          alignSelf="stretch"
          bg="$interactiveActive"
          size="$5"
        >
          <Button.Text color="$onAccent" fontWeight="bold">
            Go back
          </Button.Text>
        </Button>
      </YStack>
    </SafeAreaView>
  )
}
