import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Camera, Sparkles, Image as ImageIcon, Users } from 'lucide-react';
import MockupFrame from './MockupFrame';
import { MockupCard, MockupLabel } from './MockupPrimitives';

const rings = [
  { label: 'Capture', icon: <Camera size={18} color="#0F172A" /> },
  { label: 'Prompts', icon: <Sparkles size={18} color="#0F172A" /> },
  { label: 'Gallery', icon: <ImageIcon size={18} color="#0F172A" /> },
  { label: 'Guests', icon: <Users size={18} color="#0F172A" /> },
];

export default function MockupHome02StoryRings() {
  return (
    <MockupFrame
      title="Home 02 - Story Rings"
      subtitle="Circular quick actions with story chips"
      backgroundStyle={{
        backgroundImage: 'radial-gradient(circle at 80% 0%, rgba(244, 63, 94, 0.14), transparent 55%)',
      }}
    >
      <MockupCard>
        <Text fontSize="$5" fontFamily="$display" fontWeight="$8">
          Morning glow
        </Text>
        <MockupLabel>Tap a ring to jump in.</MockupLabel>
      </MockupCard>

      <XStack justifyContent="space-between">
        {rings.map((ring) => (
          <YStack key={ring.label} alignItems="center" gap="$2">
            <YStack
              width={72}
              height={72}
              borderRadius={36}
              backgroundColor="$surface"
              borderWidth={2}
              borderColor="$primary"
              alignItems="center"
              justifyContent="center"
            >
              {ring.icon}
            </YStack>
            <Text fontSize="$2" fontWeight="$6">
              {ring.label}
            </Text>
          </YStack>
        ))}
      </XStack>

      <YStack gap="$3">
        <MockupCard>
          <Text fontSize="$4" fontWeight="$7">
            Story highlights
          </Text>
          <XStack gap="$2">
            {[1, 2, 3].map((chip) => (
              <YStack
                key={chip}
                flex={1}
                height={90}
                borderRadius="$tile"
                backgroundColor="$muted"
                borderWidth={1}
                borderColor="$borderColor"
              />
            ))}
          </XStack>
        </MockupCard>
      </YStack>
    </MockupFrame>
  );
}