import Link from "next/link";
import { MapPin, Clock, ArrowRight } from "lucide-react";
import { formatMeetupCivilDate } from "@/lib/meetupEventTime";

export function MeetupCard({ meetup, muted = false }: { meetup: any; muted?: boolean }) {
  const civil = formatMeetupCivilDate(meetup.date);
  const month = civil?.monthShort ?? "—";
  const day = civil?.day ?? "--";
  const full = civil?.full ?? "";
  return (
    <Link
      href={`/events/${meetup.id}`}
      className={`group flex flex-col bg-zinc-900 border rounded-xl p-6 hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200 ${
        muted
          ? "border-zinc-800/60 opacity-70 hover:opacity-100 hover:border-zinc-700"
          : "border-zinc-800 hover:border-zinc-700"
      }`}
    >
      <div className="flex items-start gap-4 mb-4">
        <div className={`rounded-lg px-3 py-2 text-center shrink-0 min-w-[52px] ${muted ? "bg-zinc-800/60" : "bg-zinc-800"}`}>
          <span className={`block text-[10px] font-bold uppercase tracking-wider leading-none mb-0.5 ${muted ? "text-on-surface-variant/50" : "text-primary"}`}>
            {month}
          </span>
          <span className="block text-2xl font-black leading-none">{day}</span>
        </div>
        <div className="min-w-0">
          <h3 className="font-bold text-base leading-snug group-hover:text-primary transition-colors">
            {meetup.title}
          </h3>
          <p className="text-on-surface-variant/60 text-xs mt-1">{full}</p>
        </div>
      </div>

      {meetup.description && (
        <p className="text-on-surface-variant text-sm leading-relaxed mb-4 flex-1 line-clamp-2">
          {meetup.description}
        </p>
      )}

      <p className="text-[11px] text-on-surface-variant/50 font-medium uppercase tracking-wide mb-2">
        Organized by{" "}
        <span className="text-on-surface-variant/70 normal-case tracking-normal">
          {meetup.organizer?.name || "Belgian Bitcoin Embassy"}
        </span>
      </p>

      <div className="flex flex-col gap-1.5 mt-auto pt-4 border-t border-zinc-800/60">
        {meetup.location && (
          <p className="flex items-center gap-1.5 text-xs text-on-surface-variant/60">
            <MapPin size={12} className={`shrink-0 ${muted ? "text-on-surface-variant/40" : "text-primary/60"}`} />
            {meetup.location}
          </p>
        )}
        {meetup.time && (
          <p className="flex items-center gap-1.5 text-xs text-on-surface-variant/60">
            <Clock size={12} className={`shrink-0 ${muted ? "text-on-surface-variant/40" : "text-primary/60"}`} />
            {meetup.time}
          </p>
        )}
      </div>

      <span className={`flex items-center gap-1.5 text-xs font-semibold mt-4 group-hover:gap-2.5 transition-all ${muted ? "text-on-surface-variant/50" : "text-primary"}`}>
        View Details <ArrowRight size={12} />
      </span>
    </Link>
  );
}