import { Feather } from '@expo/vector-icons'
import { LinearGradient } from 'expo-linear-gradient'
import { ICON } from 'src/lib/icons'
import { Text, useTheme, View, XStack, YStack } from 'tamagui'

function GradientIcon({
  colors,
  icon,
  size = 32,
  style,
}: {
  colors: [string, string]
  icon: string
  size?: number
  style?: any
}) {
  return (
    <View position="absolute" {...style}>
      <LinearGradient
        colors={colors}
        style={{ borderRadius: 20, padding: 12, elevation: 8 }}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
      >
        <Feather name={icon as any} size={size} color="#FFFFFF" />
      </LinearGradient>
    </View>
  )
}

export default function StoriesExplanation() {
  const theme = useTheme()

  return (
    <YStack alignItems="center" maxWidth={320} px="$5">
      <View w={140} h={140} mb="$8" justifyContent="center" alignItems="center">
        <LinearGradient
          colors={['#FF6B6B', '#4ECDC4']}
          style={{
            position: 'absolute',
            width: 150,
            height: 150,
            borderRadius: 40,
            opacity: 0.051,
          }}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
        />
        <GradientIcon
          colors={['#667eea', '#764ba2']}
          icon="camera"
          style={{ top: 20, left: 30, transform: [{ rotate: '-15deg' }] }}
        />
        <GradientIcon
          colors={['#f093fb', '#f5576c']}
          icon="image"
          style={{ top: 25, right: 20, transform: [{ rotate: '20deg' }] }}
        />
        <GradientIcon
          colors={['#4facfe', '#00f2fe']}
          icon="users"
          size={28}
          style={{ bottom: 25, left: 20, transform: [{ rotate: '10deg' }] }}
        />
        <GradientIcon
          colors={['#43e97b', '#38f9d7']}
          icon="clock"
          style={{ bottom: 20, right: 20, transform: [{ rotate: '-25deg' }] }}
        />
      </View>

      <YStack alignItems="center" w="100%">
        <Text fontSize="$9" fontWeight="600" mb="$3" color="$color">
          Stories
        </Text>
        <Text fontSize="$6" ta="center" mb="$6" color="$color">
          Share your world. Stories live for 24 hours, then vanish.
        </Text>

        <YStack w="100%" alignItems="flex-start" gap="$3">
          <XStack gap="$3" alignItems="center">
            <Feather name="clock" size={ICON.sm} color={theme.colorTertiary.val} />
            <Text fontSize="$5" fontWeight="500" color="$colorTertiary">
              Expire after 24 hours
            </Text>
          </XStack>
          <XStack gap="$3" alignItems="center">
            <Feather name="users" size={ICON.sm} color={theme.colorTertiary.val} />
            <Text fontSize="$5" fontWeight="500" color="$colorTertiary">
              Only followers can see them
            </Text>
          </XStack>
          <XStack gap="$3" alignItems="center">
            <Feather name="type" size={ICON.sm} color={theme.colorTertiary.val} />
            <Text fontSize="$5" fontWeight="500" color="$colorTertiary">
              Add custom text overlays
            </Text>
          </XStack>
          <XStack gap="$3" alignItems="center">
            <Feather name="image" size={ICON.sm} color={theme.colorTertiary.val} />
            <Text fontSize="$5" fontWeight="500" color="$colorTertiary">
              Photos and short video
            </Text>
          </XStack>
        </YStack>
      </YStack>
    </YStack>
  )
}
