import Image from "next/image";
import Link from "next/link";

export type FeaturedEvent = {
  title: string;
  date: string;
  step: string;
  where: string;
  desc: string;
  image: string;
  thumb: string;
  schedule: { label: string; time: string }[];
};

export function FeaturedEventCard({ e }: { e: FeaturedEvent }) {
  return (
    <div className="evc">
      <div className="evc__grid">
        <div className="evc__media">
          <Image src={e.image} alt={e.title} fill className="img-cover" sizes="280px" />
        </div>
        <div className="evc__body">
          <div className="evc__head">
            <h3 className="evc__title">{e.title}</h3>
            <div className="evc__meta">
              <p className="evc__date">{e.date}</p>
              <span>
              <p className="evc__step-label">Step</p>
              <p className="evc__step">{e.step}</p></span>
            </div>
          </div>
          <div className="evc__cols">
            <div>
              <p className="evc__where">{e.where}</p>
              <p className="evc__desc">{e.desc}</p>
              <Link href="/events" className="link-arrow link-arrow--spaced-lg">
                Register Interest
              </Link>
            </div>
            <div className="evc__schedule">
              <ul className="evc__schedule-list">
                {e.schedule.map((s) => (
                  <li key={s.label} className="evc__schedule-row">
                    <span className="evc__schedule-label">{s.label}</span>
                    <span className="evc__schedule-time">{s.time}</span>
                  </li>
                ))}
              </ul>
              <div className="evc__thumb">
                <Image src="/img/guruimage.png" alt="" fill className="img-cover" sizes="96px" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export type MiniEvent = {
  tag: string;
  place: string;
  date: string;
  title: string;
  desc: string;
  image: string;
};

export function MiniEventCard({ e }: { e: MiniEvent }) {
  return (
    <div className="mec">
      <div className="mec__head">
        <span className="mec__tag">{e.tag}</span>
        <div className="mec__thumb">
          <Image src={e.image} alt={e.title} fill className="img-cover" sizes="96px" />
        </div>
      </div>
      <div className="mec__meta">
        <span className="mec__meta-item">
          <span className="mec__icon">◉</span>
          {e.place}
        </span>
        <span className="mec__meta-item">
          <span className="mec__icon">▦</span>
          {e.date}
        </span>
      </div>
      <h3 className="mec__title">{e.title}</h3>
      <p className="mec__desc">{e.desc}</p>
      <Link href="/events" className="link-arrow link-arrow--spaced-lg">
        Register Interest
      </Link>
    </div>
  );
}