/**
 * EndCardScene Component
 *
 * End card with expert avatar and "Link in bio" text.
 * Duration: ~4s
 */

import React from 'react';
import { interpolate, useCurrentFrame } from 'remotion';
import { ExpertAvatar } from '../components/ExpertAvatar';
import { darkPalette } from '../lib/colors';
import type { EndCardScene as EndCardSceneType } from '../types/video-script';

type EndCardSceneProps = {
  scene: EndCardSceneType;
  expert: { name: string; title: string; avatarUrl: string };
};

export const EndCardScene: React.FC<EndCardSceneProps> = ({ scene, expert }) => {
  const frame = useCurrentFrame();

  // Fade in
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: darkPalette.background,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 60,
        opacity,
      }}
    >
      {/* Expert avatar */}
      {scene.showExpert && (
        <div style={{ marginBottom: 40 }}>
          <ExpertAvatar
            name={expert.name}
            avatarUrl={expert.avatarUrl}
            size="large"
            animate
          />
        </div>
      )}

      {/* Expert name */}
      {scene.showExpert && (
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div
            style={{
              color: darkPalette.text,
              fontSize: 36,
              fontWeight: 600,
              marginBottom: 8,
            }}
          >
            {expert.name}
          </div>
          <div style={{ color: darkPalette.textMuted, fontSize: 24 }}>
            {expert.title}
          </div>
        </div>
      )}

      {/* Link in bio text */}
      <div
        style={{
          backgroundColor: darkPalette.surfaceElevated,
          border: `2px solid ${darkPalette.border}`,
          borderRadius: 20,
          padding: '28px 56px',
        }}
      >
        <span
          style={{
            color: darkPalette.accent,
            fontSize: 32,
            fontWeight: 600,
          }}
        >
          {scene.text}
        </span>
      </div>
    </div>
  );
};
