Empty First Time

"use client";

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

interface EmptyFirstTimeProps {
  title?: string;
  description?: string;
  ctaLabel?: string;
  features?: string[];
}

export default function EmptyFirstTime({
  title = "Bienvenue !",
  description = "",
  ctaLabel = "Creer mon premier element",
  features = [],
}: EmptyFirstTimeProps) {
  return (
    <div className="py-20 px-6" style={{ background: "var(--color-background)" }}>
      <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} className="mx-auto max-w-md text-center">
        <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ type: "spring", stiffness: 200 }} className="mx-auto w-16 h-16 rounded-2xl flex items-center justify-center mb-6" style={{ background: "var(--color-accent)" }}>
          <Sparkles size={28} style={{ color: "var(--color-background)" }} />
        </motion.div>
        <h3 className="text-xl font-bold" style={{ color: "var(--color-foreground)" }}>{title}</h3>
        <p className="mt-3 text-sm" style={{ color: "var(--color-foreground-muted)" }}>{description}</p>
        {features.length > 0 && (
          <ul className="mt-6 text-left flex flex-col gap-2">
            {features.map((f, i) => (
              <motion.li key={i} initial={{ opacity: 0, x: -8 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.3 + i * 0.08 }} className="flex items-center gap-2 text-sm" style={{ color: "var(--color-foreground-muted)" }}>
                <div className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--color-accent)" }} />
                {f}
              </motion.li>
            ))}
          </ul>
        )}
        <motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.97 }} className="mt-8 inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-xl" style={{ background: "var(--color-accent)", color: "var(--color-background)" }}>
          {ctaLabel} <ArrowRight size={16} />
        </motion.button>
      </motion.div>
    </div>
  );
}