Glass Event Card

'use client';

import './GlassEventCard.css';

/**
 * GlassEventCard — Vibrant card for events with date badge and glass effect.
 * 
 * @param {string|number} day - The event date numeric segment.
 * @param {string} month - The event month string indicator.
 * @param {string} title - The name of the event.
 * @param {string} details - Additional string metadata (e.g location and time).
 */
export interface GlassEventCardProps {
  day: string | number;
  month: string;
  title: string;
  details: string;
}

export function GlassEventCard({ day, month, title, details }: GlassEventCardProps) {
  return (
    <>
      <div className="event-card" data-rk-f41cb5="">
        <div className="event-card__badge" data-rk-f41cb5="">
          <span className="event-card__day" data-rk-f41cb5="">{day}</span>
          {month}
        </div>
        <div className="event-card__info" data-rk-f41cb5="">
          <h3 className="event-card__title" data-rk-f41cb5="">{title}</h3>
          <p className="event-card__details" data-rk-f41cb5="">{details}</p>
        </div>
        <button className="event-card__join" type="button" aria-label="Join event" data-rk-f41cb5="">+</button>
      </div>
    </>
  );
}

export default GlassEventCard;

/* GlassEventCard — ported from astro-component-kit (cards/GlassEventCard.astro) */

.event-card:where([data-rk-f41cb5]) { 
  display: flex; align-items: center; gap: var(--sp-4, 1rem); 
  padding: var(--sp-5, 1.25rem); 
  background: var(--c-bg-elev, rgba(255,255,255,0.04)); 
  backdrop-filter: blur(10px); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  border-radius: var(--r-xl, 20px); 
}
.event-card__badge:where([data-rk-f41cb5]) { 
  background: var(--c-primary, #6366f1); color: #fff; 
  width: 50px; height: 60px; 
  display: flex; flex-direction: column; align-items: center; justify-content: center; 
  font-size: 0.7rem; font-weight: 800; border-radius: var(--r-md, 12px); 
  text-transform: uppercase;
}
.event-card__day:where([data-rk-f41cb5]) { font-size: 1.2rem; line-height: 1; margin-bottom: 2px; }
.event-card__info:where([data-rk-f41cb5]) { flex: 1; }
.event-card__title:where([data-rk-f41cb5]) { font-size: 1rem; color: var(--c-text-1, #fff); margin: 0; }
.event-card__details:where([data-rk-f41cb5]) { font-size: 0.8rem; color: var(--c-text-2, #94a3b8); margin: 2px 0 0; }
.event-card__join:where([data-rk-f41cb5]) { 
  margin-left: auto; width: 40px; height: 40px; 
  border-radius: var(--r-full, 50%); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.2)); 
  background: none; color: var(--c-text-1, #fff); 
  font-size: 1.2rem; cursor: pointer; transition: 0.2s; 
}
.event-card__join:hover:where([data-rk-f41cb5]) { background: var(--c-text-1, #fff); color: var(--c-bg, #000); }