// ListaPilulas: itens em pílulas de cores diferentes, giradas em ângulos alternados, que estouram em fila com sombra dura.
import React from 'react';
import {COR, FONTE_TEXTO, LARGURA_UTIL, caber, mola, seg, useF} from '../base';

export type ListaPilulasProps = {itens: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; cores?: string[]};
export const ListaPilulas: React.FC<ListaPilulasProps> = ({itens, inicio = 0, intervalo = 6, y = 740, tamanho = 110, cores = [COR.rosa, COR.turquesa, COR.laranja, COR.azul, COR.roxo]}) => {
  const f = useF() - inicio;
  const tam = Math.min(...itens.map((t) => caber(t, tamanho, LARGURA_UTIL - 150, FONTE_TEXTO, 800, 0)));
  const alt = tam * 1.9;
  const topo = y - (itens.length * alt) / 2;
  return <>{itens.map((t, i) => {
    const p = mola(seg(f, i * intervalo, i * intervalo + 11), 2.6);
    const fundo = cores[i % cores.length];
    const claro = fundo === COR.turquesa || fundo === COR.amarelo;
    return <div key={i} style={{position: 'absolute', left: 90 + (i % 2) * 60, width: 840, top: topo + i * alt, height: alt * 0.82, borderRadius: alt, background: fundo, border: `8px solid ${COR.preto}`, boxShadow: `14px 14px 0 ${COR.preto}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_TEXTO, fontWeight: 800, fontSize: tam, color: claro ? COR.preto : COR.branco, transform: `translateX(${(1 - p) * (i % 2 ? 1000 : -1000)}px) rotate(${(i % 2 ? 2.5 : -2.5) + (1 - p) * 20}deg) scale(${Math.max(0.2, p)})`}}>{t}</div>;
  })}</>;
};