"use client";

import { useRouter } from "next/navigation";

export default function PiedDePage() {
  const router = useRouter();

  return (
    <footer className="fixed bottom-0 left-0 lg:left-64 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 px-8 py-4 flex items-center justify-between z-40">
      {/* Bouton Retour */}
      <button
        onClick={() => router.back()}
        className="flex items-center gap-2 px-6 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-all"
      >
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
        </svg>
        Retour
      </button>

      {/* Actions droite */}
      <div className="flex items-center gap-4">
        <button className="text-gray-500 text-sm font-medium hover:underline transition-all">
          Enregistrer en brouillon
        </button>
        <button
          onClick={() => router.push("/etape-suivante")} // ← à adapter selon vos routes
          className="flex items-center gap-2 px-8 py-2.5 bg-blue-600 text-white rounded-lg font-bold shadow-lg shadow-blue-200 dark:shadow-none hover:scale-[1.02] active:scale-[0.98] transition-all"
        >
          Suivant
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </footer>
  );
}