import type { EventLink } from "@db/queries/events";

const KIND_META: Record<EventLink["kind"], { tag: string; icon: string }> = {
  gallery: { tag: "Full gallery", icon: "🖼️" },
  video: { tag: "Watch", icon: "🎬" },
  press: { tag: "Press", icon: "📰" },
};

export default function EventLinks({ links }: { links: EventLink[] }) {
  return (
    <div className="rounded-2xl border border-line bg-panel p-5">
      <p className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-green-h">
        More from this event
      </p>
      <div className="mt-3 flex flex-col gap-2">
        {links.map((l) => {
          const meta = KIND_META[l.kind] ?? KIND_META.gallery;
          return (
            <a
              key={l.id}
              href={l.url}
              target="_blank"
              rel="noopener noreferrer"
              className="group flex items-center gap-3 rounded-xl border border-line bg-panel-soft px-4 py-3 hover:border-brand-green"
            >
              <span className="text-lg" aria-hidden="true">
                {meta.icon}
              </span>
              <span className="flex-1">
                <span className="block font-semibold text-white">{l.label}</span>
                <span className="block text-xs text-muted">{meta.tag}</span>
              </span>
              <span className="text-brand-green-h transition-transform group-hover:translate-x-0.5">
                ↗
              </span>
            </a>
          );
        })}
      </div>
    </div>
  );
}