Ribbon Diagonal Promo

"use client";

import { motion } from "framer-motion";
import { Sparkles, ArrowRight } from "lucide-react";

interface RibbonDiagonalPromoProps {
  messages?: string[];
  ctaLabel?: string;
  ctaUrl?: string;
}

export default function RibbonDiagonalPromo({
  messages = ["Offre speciale — decouvrez nos promotions"],
  ctaLabel = "En profiter",
  ctaUrl = "#",
}: RibbonDiagonalPromoProps) {
  // Create a repeated message strip for infinite scrolling
  const repeatedMessages = [...messages, ...messages, ...messages, ...messages];

  return (
    <div
      style={{
        position: "relative",
        overflow: "hidden",
        background: "var(--color-accent)",
        padding: "0.625rem 0",
        transform: "rotate(-1deg) scale(1.02)",
        marginTop: "-2px",
        marginBottom: "-2px",
      }}
    >
      {/* Scrolling text */}
      <motion.div
        animate={{ x: ["0%", "-50%"] }}
        transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
        style={{
          display: "flex",
          alignItems: "center",
          gap: "2rem",
          whiteSpace: "nowrap",
          width: "fit-content",
        }}
      >
        {repeatedMessages.map((msg, i) => (
          <div
            key={i}
            style={{
              display: "flex",
              alignItems: "center",
              gap: "0.5rem",
            }}
          >
            <Sparkles
              style={{
                width: 14,
                height: 14,
                color: "var(--color-background)",
                opacity: 0.7,
                flexShrink: 0,
              }}
            />
            <span
              style={{
                fontSize: "0.8125rem",
                fontWeight: 700,
                color: "var(--color-background)",
                letterSpacing: "0.02em",
              }}
            >
              {msg}
            </span>
          </div>
        ))}
      </motion.div>

      {/* CTA overlay (centered, fixed position) */}
      {ctaLabel && (
        <div
          style={{
            position: "absolute",
            right: "1.5rem",
            top: "50%",
            transform: "translateY(-50%)",
            zIndex: 2,
          }}
        >
          <a
            href={ctaUrl}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "0.375rem",
              padding: "0.25rem 0.75rem",
              borderRadius: "var(--radius-full)",
              background: "var(--color-background)",
              color: "var(--color-accent)",
              fontSize: "0.75rem",
              fontWeight: 700,
              textDecoration: "none",
              whiteSpace: "nowrap",
            }}
          >
            {ctaLabel}
            <ArrowRight style={{ width: 12, height: 12 }} />
          </a>
        </div>
      )}
    </div>
  );
}