import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Heart, X, Send } from 'lucide-react';
import MockupFrame from './MockupFrame';
import { MockupCard, MockupLabel } from './MockupPrimitives';

export default function Mockup07SwipeDeck() {
  return (
    <MockupFrame
      title="Mockup 07 - Swipe Deck"
      subtitle="Stacked cards for rapid review"
      backgroundStyle={{
        backgroundImage: 'radial-gradient(circle at 80% 0%, rgba(190, 24, 93, 0.12), transparent 50%)',
      }}
    >
      <MockupCard padding="$3">
        <Text fontSize="$4" fontWeight="$7">
          Review queue
        </Text>
        <MockupLabel>Swipe to approve or skip highlights.</MockupLabel>
      </MockupCard>

      <YStack height={360} position="relative">
        <MockupCard
          height={320}
          position="absolute"
          left={0}
          right={0}
          style={{ transform: 'translateY(24px) rotate(-2deg)' }}
        >
          <Text fontSize="$4" fontWeight="$7">
            Guest capture 3
          </Text>
        </MockupCard>
        <MockupCard
          height={330}
          position="absolute"
          left={0}
          right={0}
          style={{ transform: 'translateY(12px) rotate(1deg)' }}
        >
          <Text fontSize="$4" fontWeight="$7">
            Guest capture 2
          </Text>
        </MockupCard>
        <MockupCard height={340} position="absolute" left={0} right={0}>
          <Text fontSize="$6" fontFamily="$display" fontWeight="$8">
            Guest capture 1
          </Text>
          <MockupLabel>Tap for full view</MockupLabel>
          <YStack flex={1} borderRadius="$card" backgroundColor="$muted" />
        </MockupCard>
      </YStack>

      <XStack gap="$3" justifyContent="center">
        <YStack
          width={64}
          height={64}
          borderRadius={32}
          backgroundColor="$surface"
          borderWidth={1}
          borderColor="$borderColor"
          alignItems="center"
          justifyContent="center"
        >
          <X size={20} color="#EF4444" />
        </YStack>
        <YStack
          width={72}
          height={72}
          borderRadius={36}
          backgroundColor="$primary"
          alignItems="center"
          justifyContent="center"
        >
          <Heart size={24} color="white" />
        </YStack>
        <YStack
          width={64}
          height={64}
          borderRadius={32}
          backgroundColor="$surface"
          borderWidth={1}
          borderColor="$borderColor"
          alignItems="center"
          justifyContent="center"
        >
          <Send size={20} color="#0F172A" />
        </YStack>
      </XStack>
    </MockupFrame>
  );
}