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

const Scene = () => {
  const frame = useCurrentFrame();
  const enter = (delay: number) => interpolate(frame, [delay, delay + 22], [0, 1], {
    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
  });
  return <AbsoluteFill style={{background:'#f5eef8', color:'#222131', fontFamily:'Segoe UI,sans-serif',
    justifyContent:'center', padding:65}}>
    <div style={{fontSize:30,fontWeight:700}}>nöqtə<span style={{color:'#e97343'}}>.</span></div>
    <h1 style={{fontSize:76,lineHeight:1.02, margin:'32px 0'}}>Koddan<br/>videoya</h1>
    {['Kod','Hərəkət','MP4'].map((name,index) => {
      const p=enter(6+index*12);
      return <div key={name} style={{marginBottom:15,padding:'18px 24px',borderRadius:18,
        background:index===2?'#ff965a':'#e5dbfb',fontSize:35,fontWeight:700,
        opacity:p, transform:'translateX('+((1-p)*-45)+'px)'}}>{name}</div>;
    })}
  </AbsoluteFill>;
};
registerRoot(() => <Composition id="NoqteDemo" component={Scene} width={720}
  height={1280} fps={30} durationInFrames={120}/>);