404 Minimal

"use client";

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

interface Error404MinimalProps {
  code?: string;
  title?: string;
  description?: string;
  ctaLabel?: string;
  ctaUrl?: string;
}

const ease: [number, number, number, number] = [0.16, 1, 0.3, 1];

export default function Error404Minimal({
  code = "404",
  title = "Page introuvable",
  description = "",
  ctaLabel = "Retour a l'accueil",
  ctaUrl = "/",
}: Error404MinimalProps) {
  return (
    <section className="min-h-screen flex items-center justify-center px-6" style={{ background: "var(--color-background)" }}>
      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, ease }} className="text-center">
        <p className="text-8xl lg:text-9xl font-bold mb-4" style={{ color: "var(--color-accent)", opacity: 0.3 }}>{code}</p>
        <h1 className="text-2xl md:text-3xl font-bold mb-3" style={{ color: "var(--color-foreground)" }}>{title}</h1>
        {description && <p className="text-base mb-8 max-w-md mx-auto" style={{ color: "var(--color-foreground-muted)" }}>{description}</p>}
        <a href={ctaUrl} className="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-sm font-semibold transition-opacity hover:opacity-90" style={{ background: "var(--color-accent)", color: "var(--color-background)" }}>
          <ArrowLeft size={15} /> {ctaLabel}
        </a>
      </motion.div>
    </section>
  );
}