// File: frontend/app/(protected)/admin/layout.jsx
'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Users, ShieldCheck } from 'lucide-react';
import { cn } from '@/lib/utils'; // ตรวจสอบว่า import cn มาจากที่ถูกต้อง

export default function AdminLayout({ children }) {
  const pathname = usePathname();

  const navLinks = [
    { href: '/admin/users', label: 'User Management', icon: Users },
    { href: '/admin/roles', label: 'Role & Permission', icon: ShieldCheck },
  ];

  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-3xl font-bold">Admin Settings</h1>
        <p className="text-muted-foreground">Manage users, roles, and system permissions.</p>
      </div>
      <div className="flex border-b">
        {navLinks.map(({ href, label, icon: Icon }) => (
          <Link
            key={href}
            href={href}
            className={cn(
              'flex items-center gap-2 px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors',
              pathname === href
                ? 'border-primary text-primary'
                : 'border-transparent text-muted-foreground hover:text-foreground'
            )}
          >
            <Icon className="h-4 w-4" />
            {label}
          </Link>
        ))}
      </div>
      <div>{children}</div>
    </div>
  );
}