import React from 'react';
import { useCurrentFrame } from 'remotion';
interface DemoBoxProps {
label?: string;
color?: string;
startFrame: number;
durationInFrames: number;
}
/**
* DemoBox - Simple placeholder component for layout demonstrations
*/
export const DemoBox: React.FC<DemoBoxProps> = ({
label = "DEMO",
color = "primary",
startFrame,
durationInFrames
}) => {
const frame = useCurrentFrame();
if (frame < startFrame || frame >= startFrame + durationInFrames) {
return null;
}
const colorMap: Record<string, string> = {
primary: '#667eea',
secondary: '#764ba2',
accent: '#f093fb',
};
const bgColor = colorMap[color] || colorMap.primary;
// Split label by newlines to support multi-line text
const lines = label.split('\\n');
return (
<div
style={{
width: '100%',
height: '100%',
background: `linear-gradient(135deg, ${bgColor}40 0%, ${bgColor}20 100%)`,
border: `2px solid ${bgColor}`,
borderRadius: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
fontFamily: 'system-ui, sans-serif',
fontSize: 24,
fontWeight: 700,
color: bgColor,
textTransform: 'uppercase',
letterSpacing: '0.1em',
textAlign: 'center',
}}
>
{lines.map((line, i) => (
<div key={i}>{line}</div>
))}
</div>
);
};
