Ribbon Featured

"use client";

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

interface RibbonFeaturedProps {
  text?: string;
  highlight?: string;
  ctaLabel?: string;
  ctaUrl?: string;
}

export default function RibbonFeatured({
  text = "Reconnu comme",
  highlight = "Meilleur outil 2026",
  ctaLabel = "Lire l'article",
  ctaUrl = "#",
}: RibbonFeaturedProps) {
  return (
    <motion.section
      initial={{ opacity: 0, y: -4 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
      className="relative"
      style={{
        background: `linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%)`,
        paddingTop: "0.625rem",
        paddingBottom: "0.625rem",
      }}
    >
      <div
        className="mx-auto flex items-center justify-center gap-3 flex-wrap"
        style={{
          maxWidth: "var(--container-max-width)",
          paddingLeft: "var(--container-padding-x)",
          paddingRight: "var(--container-padding-x)",
        }}
      >
        <Star className="h-4 w-4" style={{ color: "var(--color-foreground)", fill: "var(--color-foreground)" }} />
        <p className="text-sm" style={{ color: "var(--color-foreground)" }}>
          {text}{" "}
          <strong className="font-bold">{highlight}</strong>
        </p>
        <a
          href={ctaUrl}
          className="inline-flex items-center gap-1.5 px-4 py-1 rounded-full text-xs font-semibold transition-transform hover:scale-105"
          style={{
            background: "var(--color-foreground)",
            color: "var(--color-accent)",
            textDecoration: "none",
          }}
        >
          {ctaLabel}
          <ArrowRight className="h-3 w-3" />
        </a>
      </div>
    </motion.section>
  );
}