'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTranslation } from '@/lib/i18n';
import { MENU_GROUPS } from './Header';

interface SidebarLayoutProps {
  children: React.ReactNode;
  groupKey: 'quote' | 'billing' | 'inquiry';
}

export default function SidebarLayout({ children, groupKey }: SidebarLayoutProps) {
  const pathname = usePathname();
  const { language } = useTranslation();

  const group = MENU_GROUPS[groupKey];

  const getLabel = (labelObj: { ko: string; en: string; mn: string; ru: string }) => {
    return labelObj[language as keyof typeof labelObj] || labelObj.en;
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="flex">
        {/* Sidebar */}
        <aside className="w-56 bg-white shadow-md min-h-[calc(100vh-4rem)] hidden md:block">
          <div className="p-4">
            <h2 className="text-lg font-bold text-gray-800 mb-4 pb-2 border-b">
              {getLabel(group.label)}
            </h2>
            <nav className="space-y-1">
              {group.items.map((item) => {
                const isActive = pathname === item.path || pathname.startsWith(item.path + '/');
                return (
                  <Link
                    key={item.path}
                    href={item.path}
                    className={`block px-3 py-2 rounded-lg transition ${
                      isActive
                        ? 'bg-primary-500 text-white font-medium'
                        : 'text-gray-700 hover:bg-gray-100'
                    }`}
                  >
                    {getLabel(item.label)}
                  </Link>
                );
              })}
            </nav>
          </div>
        </aside>

        {/* Mobile Sidebar - horizontal tabs */}
        <div className="md:hidden w-full bg-white border-b shadow-sm">
          <div className="flex overflow-x-auto">
            {group.items.map((item) => {
              const isActive = pathname === item.path || pathname.startsWith(item.path + '/');
              return (
                <Link
                  key={item.path}
                  href={item.path}
                  className={`flex-shrink-0 px-4 py-3 text-sm border-b-2 transition ${
                    isActive
                      ? 'border-primary-500 text-primary-600 font-medium'
                      : 'border-transparent text-gray-600 hover:text-gray-900'
                  }`}
                >
                  {getLabel(item.label)}
                </Link>
              );
            })}
          </div>
        </div>

        {/* Main Content */}
        <main className="flex-1 p-6">
          {children}
        </main>
      </div>
    </div>
  );
}
