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

export const durationInFrames = 120;
export const fps = 30;
export const width = 1920;
export const height = 1080;

export const LowerThird: React.FC = () => {
	const frame = useCurrentFrame();
	const {fps: videoFps} = useVideoConfig();

	const entrance = spring({
		frame,
		fps: videoFps,
		config: {
			damping: 18,
			stiffness: 120,
		},
	});

	const exit = interpolate(frame, [95, 115], [1, 0], {
		extrapolateLeft: 'clamp',
		extrapolateRight: 'clamp',
	});

	const progress = entrance * exit;

	return (
		<AbsoluteFill
			style={{
				background: 'linear-gradient(135deg, #0b1020, #15234a)',
				fontFamily: 'Inter, system-ui, sans-serif',
			}}
		>
			<div
				style={{
					position: 'absolute',
					left: 120,
					bottom: 130,
					transform: `translateX(${interpolate(progress, [0, 1], [-90, 0])}px)`,
					opacity: progress,
				}}
			>
				<div
					style={{
						width: 660,
						padding: '34px 42px',
						borderRadius: 28,
						background: 'rgba(255, 255, 255, 0.92)',
						boxShadow: '0 24px 80px rgba(0, 0, 0, 0.3)',
					}}
				>
					<div
						style={{
							fontSize: 54,
							fontWeight: 800,
							color: '#111827',
							letterSpacing: -1.5,
						}}
					>
						Alex Morgan
					</div>
					<div
						style={{
							fontSize: 30,
							fontWeight: 600,
							color: '#2563eb',
							marginTop: 10,
						}}
					>
						Creative Developer
					</div>
				</div>
				<div
					style={{
						width: interpolate(progress, [0, 1], [0, 520]),
						height: 10,
						borderRadius: 999,
						background: '#60a5fa',
						marginTop: 18,
					}}
				/>
			</div>
		</AbsoluteFill>
	);
};

export const RemotionRoot: React.FC = () => {
	return (
		<Composition
			id="LowerThird"
			component={LowerThird}
			durationInFrames={durationInFrames}
			fps={fps}
			height={height}
			width={width}
		/>
	);
};