Empty No Data

"use client";

import { motion } from "framer-motion";
import { Database } from "lucide-react";

interface EmptyNoDataProps {
  title?: string;
  description?: string;
  ctaLabel?: string;
}

export default function EmptyNoData({
  title = "Pas encore de donnees",
  description = "Les donnees apparaitront ici une fois generees.",
  ctaLabel = "Generer des donnees",
}: EmptyNoDataProps) {
  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-sm text-center">
        <motion.div initial={{ scale: 0, rotate: -10 }} animate={{ scale: 1, rotate: 0 }} 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-background-alt)" }}>
          <Database size={28} style={{ color: "var(--color-foreground-muted)" }} />
        </motion.div>
        <h3 className="text-lg font-semibold" style={{ color: "var(--color-foreground)" }}>{title}</h3>
        <p className="mt-2 text-sm" style={{ color: "var(--color-foreground-muted)" }}>{description}</p>
        <motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.97 }} className="mt-6 px-5 py-2.5 text-sm font-medium rounded-xl" style={{ background: "var(--color-accent)", color: "var(--color-background)" }}>
          {ctaLabel}
        </motion.button>
      </motion.div>
    </div>
  );
}