CTA Banner

"use client";

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

interface CtaBannerProps {
  text?: string;
  ctaLabel?: string;
  ctaUrl?: string;
  dismissible?: boolean;
}

export default function CtaBanner({
  text = "Offre speciale : -20% sur tous nos services ce mois-ci",
  ctaLabel = "En profiter",
  ctaUrl = "#offer",
  dismissible = true,
}: CtaBannerProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <motion.section
      initial={{ opacity: 0, y: -8 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -8 }}
      transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
      className="relative w-full"
      style={{
        background: "var(--color-accent)",
        paddingTop: "0.75rem",
        paddingBottom: "0.75rem",
      }}
    >
      <div
        className="mx-auto flex items-center justify-center gap-4 flex-wrap"
        style={{
          maxWidth: "var(--container-max-width)",
          paddingLeft: "var(--container-padding-x)",
          paddingRight: "var(--container-padding-x)",
        }}
      >
        <p
          className="text-sm font-medium"
          style={{ color: "var(--color-foreground)" }}
        >
          {text}
        </p>

        <a
          href={ctaUrl}
          className="inline-flex items-center gap-1.5 px-4 py-1.5 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>

        {dismissible && (
          <button
            onClick={() => setVisible(false)}
            className="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-full opacity-60 hover:opacity-100 transition-opacity"
            style={{ color: "var(--color-foreground)" }}
            aria-label="Fermer"
          >
            <X className="h-4 w-4" />
          </button>
        )}
      </div>
    </motion.section>
  );
}