"use client";

import { ArrowRight } from "lucide-react";

export default function AnnouncementBar() {
  const items = [
    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
  ];

  return (
    <div className="fixed top-0 left-0 right-0 z-50 bg-[#E8F4F8] overflow-hidden">
      <div className="flex animate-marquee whitespace-nowrap py-2 will-change-transform">
        {items.map((text, index) => (
          <div
            key={index}
            className="inline-flex items-center gap-4 mx-5 shrink-0"
          >
            <span className="text-xs tracking-[0.12em] uppercase text-[#1A1A1A]/70 font-medium">
              {text}
            </span>
            <ArrowRight className="w-4 h-4 text-[#1A1A1A]/50" />
          </div>
        ))}
      </div>
    </div>
  );
}