import { ReactNode } from 'react';
import { BarChart3, Package, Tag, Users, ShoppingBag, FileText, Settings } from 'lucide-react';
import Link from 'next/link';

// Интерфейс для компонента MenuItem
interface MenuItemProps {
  href: string;
  icon: React.ReactNode;
  label: string;
  active?: boolean;
}

// Компонент элемента меню
const MenuItem = ({ href, icon, label, active = false }: MenuItemProps) => {
  return (
    <Link 
      href={href}
      className={`flex items-center px-4 py-2 rounded-md mb-1 ${
        active 
          ? 'bg-indigo-100 text-indigo-700' 
          : 'text-gray-600 hover:bg-gray-100'
      }`}
    >
      {icon}
      <span className="ml-3">{label}</span>
    </Link>
  );
};

export default function AdminLayout({ children }: { children: ReactNode }) {
  // В реальном приложении здесь будет проверка авторизации
  
  return (
    <div className="flex h-screen bg-gray-50">
      {/* Боковое меню */}
      <div className="w-64 bg-white shadow-md">
        <div className="p-4 border-b">
          <h1 className="text-xl font-bold">Админ-панель</h1>
        </div>
        <div className="p-4">
          <nav>
            <MenuItem 
              href="/admin/dashboard" 
              icon={<BarChart3 size={20} />} 
              label="Дашборд" 
            />
            <MenuItem 
              href="/admin/products" 
              icon={<Package size={20} />} 
              label="Товары" 
            />
            <MenuItem 
              href="/admin/categories" 
              icon={<Tag size={20} />} 
              label="Категории" 
            />
            <MenuItem 
              href="/admin/collections" 
              icon={<Tag size={20} />} 
              label="Коллекции" 
            />
            <MenuItem 
              href="/admin/orders" 
              icon={<ShoppingBag size={20} />} 
              label="Заказы" 
            />
            <MenuItem 
              href="/admin/customers" 
              icon={<Users size={20} />} 
              label="Клиенты" 
            />
            <MenuItem 
              href="/admin/settings" 
              icon={<Settings size={20} />} 
              label="Настройки" 
            />
            <MenuItem 
              href="/" 
              icon={<Tag size={20} />} 
              label="На сайт" 
            />
          </nav>
        </div>
      </div>
      
      {/* Основной контент */}
      <div className="flex-1 overflow-auto">
        <header className="bg-white shadow-sm">
          <div className="px-6 py-4">
            <h2 className="text-xl font-semibold text-gray-800">Админ-панель</h2>
          </div>
        </header>
        <main className="p-6">
          {children}
        </main>
      </div>
    </div>
  );
} 