---
import LoteCard from './LoteCard.astro';
import Icon from './Icon.astro';
interface Props { lotes: any[]; vazioTitulo?: string; vazioTexto?: string; prioridade?: number }
const { lotes, vazioTitulo = 'Nenhum leilão aberto no momento', vazioTexto = 'Novos leilões são publicados com frequência. Cadastre-se para ser avisado.', prioridade = 0 } = Astro.props;
---
{lotes.length ? (
  <div class="grade" data-grade>
    {lotes.map((l, i) => <LoteCard lote={l} prioridade={i < prioridade} />)}
  </div>
) : (
  <div class="vazio">
    <Icon name="bell" size={40} />
    <h3>{vazioTitulo}</h3>
    <p>{vazioTexto}</p>
    <button class="btn" type="button" data-abrir-novidades><Icon name="bell" size={18} />Avise-me dos próximos</button>
  </div>
)}