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

interface Props {
  tone: 'warm' | 'cool' | 'sunrise';
  headline: string;
}

const PALETTES = {
  warm: ['#fff5e1', '#fcd28b', '#f5a96c'],
  cool: ['#e7f0ff', '#7fb4ff', '#3a74d9'],
  sunrise: ['#fff0f4', '#ffb6c7', '#ff8a6e'],
} as const;

export default function GradientAura({ tone, headline }: Props) {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const t = frame / Math.max(1, durationInFrames);
  const pulse = interpolate(Math.sin(t * Math.PI * 2), [-1, 1], [0.55, 1]);
  const [bg, mid, core] = PALETTES[tone];

  return (
    <AbsoluteFill
      style={{
        background: `radial-gradient(ellipse at center, ${core} 0%, ${mid} 30%, ${bg} 70%)`,
        filter: `brightness(${pulse})`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {headline && (
        <div
          style={{
            fontSize: 72,
            fontWeight: 800,
            color: '#1a1a1a',
            textAlign: 'center',
            padding: '0 80px',
          }}
        >
          {headline}
        </div>
      )}
    </AbsoluteFill>
  );
}

import { z } from 'zod';

export const Schema = z.object({
  tone: z.enum(['warm', 'cool', 'sunrise']).default('warm'),
  headline: z.string().describe('$port:text Headline text').default(''),
});