import { Link } from '@inertiajs/react';
import { type ReactNode } from 'react';

import { cn } from '@admin/lib/utils';

interface SettingsLayoutProps {
    children: ReactNode;
}

const links = [
    { title: 'Profile', href: route('profile.edit'), routeName: 'profile.edit' },
    { title: 'Password', href: route('password.edit'), routeName: 'password.edit' },
];

export function SettingsLayout({ children }: SettingsLayoutProps) {
    return (
        <div className="grid grid-cols-12 gap-x-5">
            <div className="col-span-12 lg:col-span-3">
                <div className="box">
                    <div className="box-body space-y-1 p-2">
                        {links.map((link) => (
                            <Link
                                key={link.href}
                                href={link.href}
                                className={cn(
                                    'block rounded-sm px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:text-white/80 dark:hover:bg-black/20',
                                    route().current(link.routeName) && 'bg-primary/10 text-primary',
                                )}
                            >
                                {link.title}
                            </Link>
                        ))}
                    </div>
                </div>
            </div>
            <div className="col-span-12 lg:col-span-9">
                <div className="box">
                    <div className="box-body">{children}</div>
                </div>
            </div>
        </div>
    );
}