import React from 'react';
import { NavLink } from 'react-router-dom';

const AdminLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <div className="flex min-h-screen bg-gray-100">
      <aside className="w-64 bg-gray-900 text-white p-6">
        <h1 className="text-2xl font-bold mb-8">Admin</h1>
        <nav className="space-y-4">
          <NavLink to="/admin/products" className={({isActive}) => isActive ? 'block text-blue-400' : 'block hover:text-gray-300'}>Products</NavLink>
          <NavLink to="/admin/sellers" className={({isActive}) => isActive ? 'block text-blue-400' : 'block hover:text-gray-300'}>Sellers</NavLink>
          <NavLink to="/admin/categories" className={({isActive}) => isActive ? 'block text-blue-400' : 'block hover:text-gray-300'}>Categories</NavLink>
        </nav>
      </aside>
      <main className="flex-1 p-8">
        {children}
      </main>
    </div>
  );
};

export default AdminLayout;