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 } from 'lucide-react';
import MockupFrame from './MockupFrame';
import { MockupCard, MockupLabel } from './MockupPrimitives';

export default function MockupHome04TaskSprint() {
  return (
    <MockupFrame
      title="Home 04 - Task Sprint"
      subtitle="Prompt ladder + progress meter"
      backgroundStyle={{
        backgroundImage: 'radial-gradient(circle at 20% 0%, rgba(167, 139, 250, 0.2), transparent 55%)',
      }}
    >
      <MockupCard>
        <XStack alignItems="center" gap="$2">
          <Sparkles size={18} color="#8B5CF6" />
          <Text fontSize="$4" fontWeight="$7">
            Sprint of the hour
          </Text>
        </XStack>
        <Text fontSize="$6" fontFamily="$display" fontWeight="$8">
          Capture three smiles in 5 minutes
        </Text>
        <MockupLabel>Earn double points for finishing early.</MockupLabel>
        <YStack gap="$2">
          <XStack alignItems="center" justifyContent="space-between">
            <Text fontSize="$2" fontWeight="$7">
              Progress
            </Text>
            <Text fontSize="$2" fontWeight="$7">
              2/3
            </Text>
          </XStack>
          <YStack backgroundColor="$muted" borderRadius="$pill" height={10} overflow="hidden">
            <YStack backgroundColor="$primary" width="66%" height={10} />
          </YStack>
        </YStack>
        <Button size="$4" backgroundColor="$primary" borderRadius="$pill">
          Continue sprint
        </Button>
      </MockupCard>

      <MockupCard>
        <XStack alignItems="center" justifyContent="space-between">
          <Text fontSize="$3" fontWeight="$7">
            Rewards
          </Text>
          <XStack alignItems="center" gap="$2">
            <Trophy size={16} color="#F59E0B" />
            <Text fontSize="$2" fontWeight="$7">
              +180
            </Text>
          </XStack>
        </XStack>
        <MockupLabel>Unlock more prompts after this sprint.</MockupLabel>
      </MockupCard>
    </MockupFrame>
  );
}