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

export default function MockupHome09ShareHub() {
  return (
    <MockupFrame
      title="Home 09 - Share Hub"
      subtitle="Invite + QR + guest sharing tools"
      backgroundStyle={{
        backgroundImage: 'radial-gradient(circle at 25% 0%, rgba(14, 165, 233, 0.18), transparent 50%)',
      }}
    >
      <MockupCard>
        <XStack alignItems="center" gap="$2">
          <Share2 size={18} color="#0F172A" />
          <Text fontSize="$4" fontWeight="$7">
            Invite guests
          </Text>
        </XStack>
        <MockupLabel>Share the link or show the QR code.</MockupLabel>
      </MockupCard>

      <XStack gap="$3">
        <MockupCard flex={1} alignItems="center" gap="$2">
          <QrCode size={24} color="#0F172A" />
          <Text fontSize="$3" fontWeight="$7">
            Show QR
          </Text>
          <MockupLabel>Scan to join</MockupLabel>
        </MockupCard>
        <MockupCard flex={1} alignItems="center" gap="$2">
          <Link size={24} color="#0F172A" />
          <Text fontSize="$3" fontWeight="$7">
            Copy link
          </Text>
          <MockupLabel>Send in chat</MockupLabel>
        </MockupCard>
      </XStack>

      <YStack
        padding="$4"
        borderRadius="$card"
        backgroundColor="$surface"
        borderWidth={1}
        borderColor="$borderColor"
        gap="$3"
      >
        <Text fontSize="$4" fontWeight="$7">
          Welcome pack
        </Text>
        <MockupLabel>Tips for guests and upload etiquette.</MockupLabel>
        <Button size="$3" backgroundColor="$primary" borderRadius="$pill" alignSelf="flex-start">
          Open guide
        </Button>
      </YStack>
    </MockupFrame>
  );
}