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

export default function MockupHome05GalleryFirst() {
  return (
    <MockupFrame
      title="Home 05 - Gallery First"
      subtitle="Grid preview + quick filters"
    >
      <MockupCard padding="$3">
        <XStack alignItems="center" justifyContent="space-between">
          <XStack alignItems="center" gap="$2">
            <ImageIcon size={18} color="#0F172A" />
            <Text fontSize="$4" fontWeight="$7">
              Moments
            </Text>
          </XStack>
          <Filter size={16} color="#0F172A" />
        </XStack>
        <MockupLabel>Start browsing before you upload.</MockupLabel>
      </MockupCard>

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

      <MockupCard>
        <Text fontSize="$3" fontWeight="$7">
          Latest uploads
        </Text>
        <MockupLabel>Updated every 15 seconds.</MockupLabel>
      </MockupCard>
    </MockupFrame>
  );
}