"use client";

import { motion } from "framer-motion";

export default function TickerBar() {
  const items = [
    "Free shipping on orders over 3000 RSD",
    "Natural ingredients",
    "Cruelty-free",
    "Handmade with love",
  ];

  return (
    <div className="bg-foreground text-white py-3 overflow-hidden">
      <motion.div
        className="flex whitespace-nowrap"
        animate={{ x: ["0%", "-50%"] }}
        transition={{
          x: {
            repeat: Infinity,
            repeatType: "loop",
            duration: 20,
            ease: "linear",
          },
        }}
      >
        {[...items, ...items, ...items, ...items].map((item, index) => (
          <span key={index} className="mx-8 text-sm tracking-wide">
            {item}
          </span>
        ))}
      </motion.div>
    </div>
  );
}