// Demo block. Source text here is kept byte-compatible with the `source`
// field seeded into RemotionBlock by scripts/seed-demo-blocks.ts so the
// live catalog preview renders the exact same component the bundler
// Lambda will produce once it ships.

import React from 'react';
import {
  AbsoluteFill,
  interpolate,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';

interface Props {
  items: { label: string; status: string }[];
  tagline: string;
  accentColor: string;
}

export default function TerminalChecklist({
  items,
  tagline,
  accentColor,
}: Props) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const perItem = fps * 0.6;

  return (
    <AbsoluteFill style={{ backgroundColor: '#000', padding: 80 }}>
      {items.map((item, i) => {
        const appear = interpolate(
          frame - i * perItem,
          [0, fps * 0.3],
          [0, 1],
          {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          }
        );
        return (
          <div
            key={i}
            style={{
              opacity: appear,
              transform: `translateY(${(1 - appear) * 12}px)`,
              border: '1px solid #333',
              borderRadius: 8,
              padding: '18px 22px',
              marginBottom: 16,
              color: '#fff',
              fontFamily: 'monospace',
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            <div>
              <span style={{ color: accentColor, marginRight: 12 }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              <span style={{ fontWeight: 700 }}>{item.label}</span>
            </div>
            <div style={{ color: accentColor, fontSize: 16 }}>
              {item.status}
            </div>
          </div>
        );
      })}
      <div
        style={{
          position: 'absolute',
          bottom: 120,
          left: 80,
          color: accentColor,
          fontFamily: 'monospace',
          fontSize: 36,
          fontWeight: 800,
        }}
      >
        {tagline}
      </div>
    </AbsoluteFill>
  );
}

import { z } from 'zod';

export const Schema = z.object({
  items: z
    .array(z.object({ label: z.string(), status: z.string() }))
    .describe('$port:json Checklist items (array of {label, status})'),
  tagline: z.string().default('CONNECTS TO EVERY TOOL').describe('Tagline'),
  accentColor: z.string().default('#22c55e'),
});