import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { Sparkles, Trophy, Play } from 'lucide-react';
import MockupFrame from './MockupFrame';
import { MockupCard, MockupLabel } from './MockupPrimitives';

export default function Mockup03PromptQuest() {
  return (
    <MockupFrame
      title="Mockup 03 - Prompt Quest"
      subtitle="Prompt hero with progress and task ladder"
    >
      <MockupCard>
        <XStack alignItems="center" gap="$2">
          <Sparkles size={18} color="#F43F5E" />
          <Text fontSize="$3" fontWeight="$7">
            Prompt of the hour
          </Text>
        </XStack>
        <Text fontSize="$7" fontFamily="$display" fontWeight="$8">
          Capture the boldest dance move
        </Text>
        <MockupLabel>Earn 120 points for completing this prompt.</MockupLabel>
        <YStack gap="$2">
          <XStack alignItems="center" justifyContent="space-between">
            <Text fontSize="$2" fontWeight="$7">
              Quest progress
            </Text>
            <Text fontSize="$2" fontWeight="$7">
              65%
            </Text>
          </XStack>
          <YStack backgroundColor="$muted" borderRadius="$pill" height={10} overflow="hidden">
            <YStack backgroundColor="$primary" width="65%" height={10} />
          </YStack>
        </YStack>
        <Button size="$4" backgroundColor="$primary" borderRadius="$pill">
          Start capture
        </Button>
      </MockupCard>

      <YStack gap="$3">
        {[1, 2, 3].map((item) => (
          <MockupCard key={item} padding="$3">
            <XStack alignItems="center" justifyContent="space-between">
              <YStack gap="$1">
                <Text fontSize="$4" fontWeight="$7">
                  Task {item}
                </Text>
                <MockupLabel>Quick challenge to spark the moment.</MockupLabel>
              </YStack>
              <XStack alignItems="center" gap="$2">
                <Trophy size={16} color="#F59E0B" />
                <Text fontSize="$2" fontWeight="$7">
                  +50
                </Text>
              </XStack>
            </XStack>
            <Button size="$3" backgroundColor="$surface" borderRadius="$pill" borderWidth={1} borderColor="$borderColor">
              <XStack alignItems="center" gap="$2">
                <Play size={14} color="#0F172A" />
                <Text fontSize="$2" fontWeight="$7">
                  Play task
                </Text>
              </XStack>
            </Button>
          </MockupCard>
        ))}
      </YStack>
    </MockupFrame>
  );
}