import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Camera, Grid2x2, Zap, UploadCloud } from 'lucide-react';
import MockupFrame from './MockupFrame';
import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';

export default function Mockup06SplitCapture() {
  return (
    <MockupFrame
      title="Mockup 06 - Split Capture"
      subtitle="Camera preview plus quick tools and queue"
      backgroundStyle={{
        backgroundImage: 'linear-gradient(180deg, rgba(240, 249, 255, 0.95), rgba(255, 255, 255, 0.95))',
      }}
    >
      <YStack gap="$3">
        <YStack
          height={260}
          borderRadius="$card"
          backgroundColor="$muted"
          borderWidth={1}
          borderColor="$borderColor"
          alignItems="center"
          justifyContent="center"
          gap="$2"
        >
          <Camera size={32} color="#0F172A" />
          <Text fontSize="$4" fontWeight="$7">
            Live preview
          </Text>
          <MockupLabel>Tap anywhere to focus.</MockupLabel>
        </YStack>

        <XStack gap="$3">
          {[
            { icon: <Grid2x2 size={18} color="#0F172A" />, label: 'Grid' },
            { icon: <Zap size={18} color="#F97316" />, label: 'Flash' },
            { icon: <UploadCloud size={18} color="#0F172A" />, label: 'Upload' },
          ].map((tool) => (
            <MockupCard key={tool.label} flex={1} padding="$3" alignItems="center">
              {tool.icon}
              <Text fontSize="$3" fontWeight="$7">
                {tool.label}
              </Text>
            </MockupCard>
          ))}
        </XStack>
      </YStack>

      <MockupCard>
        <XStack alignItems="center" justifyContent="space-between">
          <Text fontSize="$4" fontWeight="$7">
            Upload queue
          </Text>
          <MockupLabel>2 waiting</MockupLabel>
        </XStack>
        <XStack gap="$2">
          {[1, 2, 3].map((tile) => (
            <MockupTile key={tile} flex={1} height={72} />
          ))}
        </XStack>
      </MockupCard>
    </MockupFrame>
  );
}