import React from 'react';
import { motion } from 'motion/react';
import { Settings } from 'lucide-react';
import { useOutletContext } from 'react-router-dom';

export const Config = () => {
  return (
    <motion.div
      key="config"
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      className="bg-white dark:bg-slate-900 rounded-[3rem] p-12 border border-slate-100 dark:border-slate-800 shadow-sm text-center"
     >
        <div className="max-w-md mx-auto">
           <div className="w-20 h-20 bg-slate-100 dark:bg-slate-800 rounded-3xl flex items-center justify-center mx-auto mb-6">
              <Settings className="w-10 h-10 text-slate-600 dark:text-slate-400" />
           </div>
           <h3 className="text-2xl font-black text-slate-900 dark:text-white mb-4">Configuration</h3>
           <p className="text-slate-500 font-medium mb-8">
              Les configurations générales de la plateforme viendront ici...
           </p>
        </div>
     </motion.div>
  );
};