import { NavLink, Outlet } from 'react-router-dom';
import { LayoutDashboard, List, Calendar, CalendarDays, DollarSign, Star, CreditCard } from 'lucide-react';

const navItems = [
  { to: '/landlord', icon: LayoutDashboard, label: 'Dashboard', end: true },
  { to: '/landlord/listings', icon: List, label: 'My Rentals' },
  { to: '/landlord/bookings', icon: Calendar, label: 'Bookings' },
  { to: '/landlord/calendar', icon: CalendarDays, label: 'Calendar' },
  { to: '/landlord/payouts', icon: DollarSign, label: 'Payouts' },
  { to: '/landlord/reviews', icon: Star, label: 'Reviews' },
  { to: '/landlord/subscription', icon: CreditCard, label: 'Subscription' },
];

export function LandlordLayout() {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
      <div className="flex gap-8">
        {/* Sidebar */}
        <aside className="hidden md:block w-56 flex-shrink-0">
          <nav className="bg-gradient-to-b from-violet-100 via-purple-50 to-pink-50 rounded-2xl p-3 sticky top-24 shadow-sm">
            <h2 className="text-sm font-bold text-violet-900 mb-3 px-4 pt-1">Landlord Portal</h2>
            {navItems.map(({ to, icon: Icon, label, end }) => (
              <NavLink
                key={to}
                to={to}
                end={end}
                className={({ isActive }) =>
                  `flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors ${
                    isActive
                      ? 'bg-white/70 text-violet-700 shadow-sm'
                      : 'text-purple-700/70 hover:bg-white/40'
                  }`
                }
              >
                <Icon className="w-4 h-4" />
                {label}
              </NavLink>
            ))}
          </nav>
        </aside>

        {/* Content */}
        <main className="flex-1 min-w-0">
          <Outlet />
        </main>
      </div>
    </div>
  );
}