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

const sections = [
  {
    key: 'morning',
    title: 'Morning glow',
    icon: <Sun size={18} color="#F97316" />,
  },
  {
    key: 'afternoon',
    title: 'Afternoon energy',
    icon: <CloudSun size={18} color="#F59E0B" />,
  },
  {
    key: 'night',
    title: 'Night sparkle',
    icon: <MoonStar size={18} color="#6366F1" />,
  },
];

export default function Mockup08Daybook() {
  return (
    <MockupFrame
      title="Mockup 08 - Daybook"
      subtitle="Morning/afternoon/night memory sections"
    >
      <MockupCard>
        <Text fontSize="$5" fontFamily="$display" fontWeight="$8">
          Today in moments
        </Text>
        <MockupLabel>Group memories by vibe, not just time.</MockupLabel>
      </MockupCard>

      <YStack gap="$4">
        {sections.map((section) => (
          <YStack key={section.key} gap="$2">
            <XStack alignItems="center" gap="$2">
              {section.icon}
              <Text fontSize="$4" fontWeight="$7">
                {section.title}
              </Text>
            </XStack>
            <XStack gap="$2">
              {[1, 2, 3].map((tile) => (
                <MockupTile key={tile} flex={1} height={110} />
              ))}
            </XStack>
          </YStack>
        ))}
      </YStack>
    </MockupFrame>
  );
}