// TeclaAtalho: teclas de verdade (190 px, brancas, com a borda de baixo de 14 px) que entram com mola e
// são APERTADAS em sequência (descem 10 px, a borda some, a letra fica laranja). Legenda embaixo.
// "cmd" desenha o símbolo de comando em SVG (não depende da fonte).
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, e5, mola, seg} from '../base';

export type TeclaAtalhoProps = {teclas: string[]; legenda?: string; y?: number; inicio?: number; aperta?: number};

const Cmd: React.FC<{cor: string}> = ({cor}) => <svg width={92} height={92} viewBox="0 0 24 24" fill="none" stroke={cor} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round">
  <path d="M9 6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3z" /></svg>;

export const TeclaAtalho: React.FC<TeclaAtalhoProps> = ({teclas, legenda, y = 760, inicio = 0, aperta}) => {
  const f = useCurrentFrame();
  const ap = aperta ?? inicio + 16;
  return <div style={{position: 'absolute', left: 0, right: 0, top: y}}>
    <div style={{display: 'flex', justifyContent: 'center', gap: 40}}>
      {teclas.map((k, i) => {
        const t = mola(seg(f, inicio + i * 4, inicio + i * 4 + 12));
        const baixo = f >= ap + i * 3 && f < ap + i * 3 + 30 ? 1 : 0;
        const c = baixo ? COR.acento : COR.tinta;
        return <div key={i} style={{width: 190, height: 190, borderRadius: 36, background: COR.tela, transform: `translateY(${(1 - t) * 300 + baixo * 10}px) scale(${Math.max(0, t)})`,
          boxShadow: baixo ? '0 4px 0 #C9CED6, 0 10px 20px rgba(20,22,26,.12)' : '0 14px 0 #C9CED6, 0 30px 40px rgba(20,22,26,.18)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: FONTE, fontWeight: 800, fontSize: 100, color: c}}>{k === 'cmd' ? <Cmd cor={c} /> : k}</div>;
      })}
    </div>
    {legenda && <div style={{marginTop: 70, textAlign: 'center', fontFamily: FONTE, fontWeight: 800, fontSize: 64, letterSpacing: '-0.02em', color: COR.tinta, opacity: e5(seg(f, inicio + 10, inicio + 20)), transform: `translateY(${(1 - e5(seg(f, inicio + 10, inicio + 20))) * 30}px)`}}>{legenda}</div>}
  </div>;
};