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

export default function Mockup02GalleryMosaic() {
  return (
    <MockupFrame
      title="Mockup 02 - Gallery Mosaic"
      subtitle="Image-first grid with fast filters"
      backgroundStyle={{
        backgroundImage: 'linear-gradient(160deg, rgba(248, 250, 252, 0.9), rgba(255, 245, 240, 0.9))',
      }}
    >
      <MockupCard padding="$3">
        <XStack alignItems="center" justifyContent="space-between">
          <XStack alignItems="center" gap="$2">
            <ImageIcon size={18} color="#0F172A" />
            <Text fontSize="$4" fontWeight="$8">
              Gallery
            </Text>
          </XStack>
          <Filter size={18} color="#0F172A" />
        </XStack>
        <XStack gap="$2" flexWrap="wrap">
          {['All', 'Friends', 'Dancefloor', 'Candid'].map((chip) => (
            <MockupChip key={chip}>
              <Text fontSize="$2" fontWeight="$6">
                {chip}
              </Text>
            </MockupChip>
          ))}
        </XStack>
      </MockupCard>

      <XStack gap="$3">
        <YStack flex={1} gap="$3">
          <MockupTile height={160}>
            <MockupLabel>Hero moment</MockupLabel>
          </MockupTile>
          <XStack gap="$3">
            <MockupTile flex={1} height={90} />
            <MockupTile flex={1} height={90} />
          </XStack>
          <MockupTile height={120} />
        </YStack>
        <YStack flex={1} gap="$3">
          <XStack gap="$3">
            <MockupTile flex={1} height={110} />
            <MockupTile flex={1} height={110} />
          </XStack>
          <MockupTile height={180}>
            <MockupLabel>Live spotlight</MockupLabel>
          </MockupTile>
          <MockupTile height={90} />
        </YStack>
      </XStack>

      <MockupCard>
        <XStack alignItems="center" justifyContent="space-between">
          <YStack gap="$1">
            <Text fontSize="$3" fontWeight="$7">
              Newest uploads
            </Text>
            <MockupLabel>Refreshes every 10s</MockupLabel>
          </YStack>
          <Text fontSize="$2" fontWeight="$7">
            22 new
          </Text>
        </XStack>
      </MockupCard>
    </MockupFrame>
  );
}