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

const timeline = [
  { time: '18:40', title: 'Sparkler exit', caption: '12 new uploads' },
  { time: '18:22', title: 'First dance', caption: '7 moments added' },
  { time: '18:10', title: 'Toast round', caption: '5 guest favorites' },
  { time: '17:55', title: 'Arrival glow', caption: '4 candid shots' },
];

export default function Mockup04TimelineStream() {
  return (
    <MockupFrame
      title="Mockup 04 - Timeline Stream"
      subtitle="Chronological feed with time markers"
      backgroundStyle={{
        backgroundImage: 'linear-gradient(180deg, rgba(254, 252, 232, 0.9), rgba(255, 255, 255, 0.95))',
      }}
    >
      <MockupCard padding="$3">
        <XStack alignItems="center" gap="$2">
          <Clock size={16} color="#0F172A" />
          <Text fontSize="$4" fontWeight="$7">
            Live timeline
          </Text>
        </XStack>
        <MockupLabel>Moments grouped by when they happened.</MockupLabel>
      </MockupCard>

      <YStack gap="$3">
        {timeline.map((item, index) => (
          <XStack key={item.time} gap="$3" alignItems="flex-start">
            <YStack alignItems="center" gap="$2" width={60}>
              <Text fontSize="$2" fontWeight="$7">
                {item.time}
              </Text>
              <YStack width={2} flex={1} backgroundColor="$borderColor" opacity={index === timeline.length - 1 ? 0 : 1} />
            </YStack>
            <MockupCard flex={1} padding="$3">
              <XStack alignItems="center" gap="$2">
                <ImageIcon size={16} color="#0F172A" />
                <Text fontSize="$4" fontWeight="$7">
                  {item.title}
                </Text>
              </XStack>
              <MockupLabel>{item.caption}</MockupLabel>
              <XStack gap="$2">
                {[1, 2, 3].map((tile) => (
                  <YStack
                    key={tile}
                    flex={1}
                    height={56}
                    borderRadius="$tile"
                    backgroundColor="$muted"
                    borderWidth={1}
                    borderColor="$borderColor"
                  />
                ))}
              </XStack>
            </MockupCard>
          </XStack>
        ))}
      </YStack>
    </MockupFrame>
  );
}