import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Play, Star, Share2 } from 'lucide-react';
import MockupFrame from './MockupFrame';
import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';

export default function Mockup10SpotlightReel() {
  return (
    <MockupFrame
      title="Mockup 10 - Spotlight Reel"
      subtitle="Live highlight reel with action strip"
      backgroundStyle={{
        backgroundImage: 'radial-gradient(circle at 20% 0%, rgba(251, 191, 36, 0.2), transparent 55%)',
      }}
    >
      <MockupCard>
        <XStack alignItems="center" justifyContent="space-between">
          <YStack gap="$1">
            <Text fontSize="$4" fontWeight="$7">
              Spotlight reel
            </Text>
            <MockupLabel>Live highlights curated by guests.</MockupLabel>
          </YStack>
          <Play size={18} color="#0F172A" />
        </XStack>
      </MockupCard>

      <XStack gap="$2">
        {[1, 2, 3, 4, 5].map((tile) => (
          <MockupTile key={tile} flex={1} height={70} />
        ))}
      </XStack>

      <MockupCard>
        <Text fontSize="$6" fontFamily="$display" fontWeight="$8">
          Now showing
        </Text>
        <YStack height={200} borderRadius="$card" backgroundColor="$muted" />
        <XStack alignItems="center" justifyContent="space-between">
          <XStack alignItems="center" gap="$2">
            <Star size={16} color="#F59E0B" />
            <Text fontSize="$3" fontWeight="$7">
              4.8 rating
            </Text>
          </XStack>
          <Share2 size={16} color="#0F172A" />
        </XStack>
      </MockupCard>

      <XStack gap="$2">
        {['Like', 'Save', 'Share'].map((action) => (
          <MockupCard key={action} flex={1} padding="$3" alignItems="center">
            <Text fontSize="$3" fontWeight="$7">
              {action}
            </Text>
          </MockupCard>
        ))}
      </XStack>
    </MockupFrame>
  );
}