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

export default function MockupHome03LiveStream() {
  return (
    <MockupFrame
      title="Home 03 - Live Stream"
      subtitle="Highlight reel + action strip"
      backgroundStyle={{
        backgroundImage: 'linear-gradient(180deg, rgba(254, 242, 242, 0.9), rgba(255, 255, 255, 0.95))',
      }}
    >
      <MockupCard>
        <XStack alignItems="center" justifyContent="space-between">
          <XStack alignItems="center" gap="$2">
            <Cast size={18} color="#0F172A" />
            <Text fontSize="$4" fontWeight="$7">
              Live highlight stream
            </Text>
          </XStack>
          <Text fontSize="$2" fontWeight="$7">
            24 now
          </Text>
        </XStack>
        <MockupLabel>Tap to join the live wall.</MockupLabel>
      </MockupCard>

      <MockupCard>
        <YStack height={210} borderRadius="$card" backgroundColor="$muted" />
        <XStack alignItems="center" justifyContent="space-between">
          <XStack alignItems="center" gap="$2">
            <Play size={16} color="#0F172A" />
            <Text fontSize="$3" fontWeight="$7">
              Now playing
            </Text>
          </XStack>
          <Share2 size={16} color="#0F172A" />
        </XStack>
      </MockupCard>

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