'use client';

import React from 'react';
import Button from './button';

export default function EmptyEventsState() {
  return (
    <div className="container py-5">
      <div className="row justify-content-center">
        <div className="col-lg-8">
          <div className="text-center fade-in-scale">
            {/* Ilustración principal con Bootstrap */}
            <div className="mb-2">
              <div
                className="d-inline-flex align-items-center justify-content-center bg-dorado bg-opacity-10 rounded-circle mb-4"
                style={{ width: '150px', height: '150px' }}
              >
                <i className="bi bi-calendar-x text-dorado display-1"></i>
              </div>
            </div>

            {/* Título y mensaje principal */}
            <div className="mb-5">
              <h1 className="display-5 fw-bold text-azul mb-3 fade-in-up delay-1">
                No hay eventos disponibles
              </h1>
              <p className="lead text-muted mb-0 fade-in-up delay-2">
                En este momento no tenemos eventos activos para mostrar.
                <br className="d-none d-md-block" />
                <span className="text-azul fw-semibold">
                  ¡No te preocupes!
                </span>{' '}
                Pronto habrá nuevas oportunidades de participación.
              </p>
            </div>

            {/* Botón de acción usando clases Bootstrap */}
            <div className="fade-in-up delay-4">
              <Button
                icon="bi bi-arrow-clockwise"
                onClick={() => window.location.reload()}
                size="lg"
                className="rounded-pill px-5"
              >
                Actualizar pagina
              </Button>
            </div>

            {/* Mensaje adicional */}
            <div className="mt-4 fade-in-up delay-5">
              <small className="text-muted">
                <i className="bi bi-info-circle me-1"></i>
                Esta página se actualiza automáticamente para mostrar los
                eventos más recientes
              </small>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
