import { Outlet, Link, useLocation } from 'react-router-dom';
import { HardHat, FolderKanban, ListChecks } from 'lucide-react';

const NAV = [
  ['My Projects', '/builder', FolderKanban],
  ['My Tasks', '/builder/tasks', ListChecks],
];

export default function BuilderLayout() {
  const path = useLocation().pathname;
  return (
    <div className="min-h-screen bg-workshop text-shire-text">
      <aside className="fixed inset-y-0 left-0 w-60 border-r border-shire-border bg-shire-bg/80 p-4">
        <Link to="/builder" className="mb-6 flex items-center gap-2">
          <HardHat className="h-7 w-7 text-shire-green-bright" />
          <div>
            <p className="text-sm font-bold text-white">Builder</p>
            <p className="text-xs text-shire-text-muted">Workshop Workspace</p>
          </div>
        </Link>
        <nav className="space-y-1">
          {NAV.map(([label, to, Icon]) => (
            <Link key={to} to={to} className={`nav-link ${path === to ? 'nav-link-active' : ''}`}><Icon /><span>{label}</span></Link>
          ))}
        </nav>
      </aside>
      <main className="ml-60 p-6 lg:p-8"><Outlet /></main>
    </div>
  );
}