"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

const PROMOS = [
  {
    id: "free-shipping",
    message: "Free delivery on orders over £40. Automatically applied at checkout.",
    href: "/shop",
  },
  {
    id: "first-order",
    message: "Sign up to our newsletter to get 10% off your first order.",
    href: "/#newsletter",
  },
  {
    id: "reorders",
    message: "5% off on re-orders over £30. Automatically applied at checkout.",
    href: "/shop",
  },
] as const;

const ROTATION_INTERVAL_MS = 6000;

export function AnnouncementBar() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setIndex((i) => (i + 1) % PROMOS.length);
    }, ROTATION_INTERVAL_MS);
    return () => clearInterval(id);
  }, []);

  const promo = PROMOS[index];

  return (
    <div
      className="w-full border-b border-[#e8e8e8] bg-[#f4a13a]"
      role="region"
      aria-label="Promotional offers"
    >
      <div className="mx-auto flex max-w-[1400px] items-center justify-center px-4 py-2.5">
        <Link
          href={promo.href}
          className="text-center font-sans text-xs font-medium text-[#3d5554] transition-colors hover:text-[#236f6b] md:text-sm"
        >
          <span className="text-[#f2705a]">{promo.id === "free-shipping" ? "★ " : ""}</span>
          {promo.message}
        </Link>
      </div>
    </div>
  );
}
