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

const palettes = ['#FDE68A', '#F9A8D4', '#A5B4FC', '#6EE7B7', '#FCA5A5'];

export default function MockupHome10Moodboard() {
  return (
    <MockupFrame
      title="Home 10 - Moodboard"
      subtitle="Palette + prompts to set the vibe"
      backgroundStyle={{
        backgroundImage: 'linear-gradient(180deg, rgba(255, 247, 237, 0.95), rgba(255, 255, 255, 0.95))',
      }}
    >
      <MockupCard>
        <XStack alignItems="center" gap="$2">
          <Palette size={18} color="#0F172A" />
          <Text fontSize="$4" fontWeight="$7">
            Moodboard
          </Text>
        </XStack>
        <MockupLabel>Pick a vibe for the next wave of shots.</MockupLabel>
      </MockupCard>

      <XStack gap="$2">
        {palettes.map((color) => (
          <YStack
            key={color}
            flex={1}
            height={54}
            borderRadius="$pill"
            style={{ backgroundColor: color }}
          />
        ))}
      </XStack>

      <MockupCard>
        <XStack alignItems="center" gap="$2">
          <Sparkles size={16} color="#F43F5E" />
          <Text fontSize="$3" fontWeight="$7">
            Prompt ideas
          </Text>
        </XStack>
        <XStack gap="$2">
          {[1, 2, 3].map((tile) => (
            <MockupTile key={tile} flex={1} height={80} />
          ))}
        </XStack>
      </MockupCard>
    </MockupFrame>
  );
}