"use client";
import React from "react";
import { useSettingsStore } from "../lib/store/settingsStore";
import { Sparkles } from "lucide-react";

export default function TickerBanner() {
  const getText = useSettingsStore((state) => state.getText);
  const announcementText = getText(
    "shipping_notice",
    "ارسال رایگان برای سفارش‌های بالای ۱۵۰ هزار تومان — گارانتی اصالت کانینا آلمان — مشاوره تخصصی مکمل‌های دارویی سگ و گربه با کادر دامپزشکان مجرب"
  );

  return (
    <div className="bg-canina-gold text-canina-dark text-xs font-black py-1.5 overflow-hidden relative shadow-xs border-b border-amber-300/40 select-none">
      <div className="flex items-center gap-2 whitespace-nowrap animate-marquee">
        <span className="flex items-center gap-2 px-4">
          <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
          {announcementText}
        </span>
        <span className="flex items-center gap-2 px-4">
          <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
          {announcementText}
        </span>
        <span className="flex items-center gap-2 px-4">
          <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
          {announcementText}
        </span>
        <span className="flex items-center gap-2 px-4">
          <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
          {announcementText}
        </span>
      </div>
    </div>
  );
}