import Link from "next/link";

import { fetchHomeEvents } from "@/lib/home-extras";

/** Admin-managed promo banners (content-svc /v1/home-events). Renders nothing when empty.
 *  Per-event background/text colours are admin data → applied via inline style. */
export async function HomeEvents() {
  const events = await fetchHomeEvents();
  if (!events.length) return null;

  return (
    <section className="w-full bg-white py-8">
      <div className="mx-auto max-w-7xl space-y-3 px-4 sm:px-6 lg:px-8">
        {events.map((e) => (
          <div
            key={e.id}
            className="flex flex-col items-start justify-between gap-3 rounded-2xl border border-gray-100 bg-neutral-50 p-5 shadow-sm sm:flex-row sm:items-center"
            style={{
              backgroundColor: e.background_color || undefined,
              color: e.text_color || undefined,
            }}
          >
            <div className="flex items-center gap-3">
              {e.badge && (
                <span className="shrink-0 rounded-full bg-blue-600 px-3 py-1 text-xs font-semibold text-white">
                  {e.badge}
                </span>
              )}
              <div>
                {e.title && <p className="font-heading text-lg font-bold">{e.title}</p>}
                {e.subtitle && <p className="text-sm opacity-80">{e.subtitle}</p>}
              </div>
            </div>
            {e.button_text && e.button_url && (
              <Link
                href={e.button_url}
                className="shrink-0 rounded-lg bg-blue-600 px-5 py-2 text-sm font-semibold text-white hover:bg-blue-700"
              >
                {e.button_text}
              </Link>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}
