"use client";

import { ShieldCheck, Zap, Gift } from "lucide-react";

const items = [
  { icon: ShieldCheck, label: "Official Meta WhatsApp Business API" },
  { icon: Gift, label: "Free Trial Available" },
  { icon: Zap, label: "99.9% Uptime" },
];

export function AnnouncementBar() {
  return (
    <div className="relative z-50 overflow-hidden bg-ink-950 text-white">
      <div className="container flex h-10 items-center justify-center gap-6 text-xs font-medium sm:text-sm">
        {items.map(({ icon: Icon, label }, i) => (
          <div
            key={label}
            className={`items-center gap-1.5 ${i === 0 ? "flex" : "hidden sm:flex"}`}
          >
            <Icon className="h-3.5 w-3.5 shrink-0 text-whatsapp" aria-hidden="true" />
            <span className="whitespace-nowrap">{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}