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

const tasks = [
  { id: 1, label: 'Capture the first toast', done: true },
  { id: 2, label: 'Find the loudest laugh', done: false },
  { id: 3, label: 'Snap a detail shot', done: false },
  { id: 4, label: 'Find the dance duo', done: true },
];

export default function Mockup09ChecklistFlow() {
  return (
    <MockupFrame
      title="Mockup 09 - Checklist Flow"
      subtitle="Tasks checklist paired with gallery progress"
      backgroundStyle={{
        backgroundImage: 'linear-gradient(180deg, rgba(244, 244, 255, 0.8), rgba(255, 255, 255, 0.9))',
      }}
    >
      <MockupCard>
        <XStack alignItems="center" gap="$2">
          <ListChecks size={18} color="#0F172A" />
          <Text fontSize="$4" fontWeight="$7">
            Today’s checklist
          </Text>
        </XStack>
        <MockupLabel>Complete tasks to unlock more prompts.</MockupLabel>
      </MockupCard>

      <MockupCard>
        <YStack gap="$2">
          {tasks.map((task) => (
            <XStack key={task.id} alignItems="center" gap="$2">
              {task.done ? (
                <CheckCircle2 size={18} color="#22C55E" />
              ) : (
                <Circle size={18} color="#94A3B8" />
              )}
              <Text fontSize="$3" fontWeight="$6">
                {task.label}
              </Text>
            </XStack>
          ))}
        </YStack>
      </MockupCard>

      <MockupCard>
        <Text fontSize="$3" fontWeight="$7">
          Progress gallery
        </Text>
        <XStack gap="$2">
          {[1, 2, 3, 4].map((tile) => (
            <MockupTile key={tile} flex={1} height={70} />
          ))}
        </XStack>
      </MockupCard>
    </MockupFrame>
  );
}