Empty Error

"use client";

import { motion } from "framer-motion";
import { AlertTriangle, RefreshCw } from "lucide-react";

interface EmptyErrorProps {
  title?: string;
  description?: string;
  ctaLabel?: string;
  errorCode?: string;
}

export default function EmptyError({
  title = "Une erreur est survenue",
  description = "Nous n'avons pas pu charger les donnees. Veuillez reessayer.",
  ctaLabel = "Reessayer",
  errorCode = "",
}: EmptyErrorProps) {
  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 }} 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-background-alt)" }}>
          <AlertTriangle size={28} style={{ color: "var(--color-accent)" }} />
        </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>
        {errorCode && <p className="mt-2 text-xs font-mono" style={{ color: "var(--color-foreground-light)" }}>Code: {errorCode}</p>}
        <motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.97 }} className="mt-6 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)" }}>
          <RefreshCw size={14} /> {ctaLabel}
        </motion.button>
      </motion.div>
    </div>
  );
}