import Feather from '@expo/vector-icons/Feather'
import { ICON } from 'src/lib/icons'
import { Button, Text, useTheme, YStack } from 'tamagui'

type Props = {
  icon?: string
  title: string
  subtitle?: string
  cta?: { label: string; onPress: () => void }
}

export function EmptyState({ icon = 'inbox', title, subtitle, cta }: Props) {
  const theme = useTheme()

  return (
    <YStack flex={1} justifyContent="center" alignItems="center" py="$8" gap="$3">
      <Feather name={icon as any} size={ICON.empty} color={theme.colorTertiary.val} />
      <Text fontSize="$6" fontWeight="600" color="$color">
        {title}
      </Text>
      {subtitle && (
        <Text color="$colorTertiary" ta="center" px="$6">
          {subtitle}
        </Text>
      )}
      {cta && (
        <Button mt="$3" size="$4" onPress={cta.onPress}>
          {cta.label}
        </Button>
      )}
    </YStack>
  )
}
