import React from 'react';
import { NavLink, useLocation, Link } from 'react-router-dom';
import { Plus } from 'lucide-react';
import { cn } from '@/lib/utils';

interface LayoutProps {
  children: React.ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const location = useLocation();

  const navItems = [
    { path: '/', label: 'The Stream' },
    { path: '/my-dissolves', label: 'My Dissolves' },
  ];

  return (
    <div className="min-h-screen bg-canvas font-sans">
      <header className="sticky top-0 z-40 h-[80px] w-full bg-canvas/80 backdrop-blur-sm">
        <div className="container-full flex h-full items-center justify-between border-b border-hairline">
          <div className="flex items-center gap-12">
            <Link to="/" className="text-2xl font-medium tracking-tight text-ink">
              Dissolve
            </Link>
            <nav className="hidden items-center gap-6 md:flex">
              {navItems.map((item) => {
                 const isActive = location.pathname === item.path;
                 return (
                   <NavLink
                      key={item.path}
                      to={item.path}
                      className={cn(
                        'relative text-muted transition-colors hover:text-ink',
                         isActive && 'text-ink'
                       )}
                    >
                      {item.label}
                      {isActive && <div className="absolute -bottom-2 left-0 right-0 h-[2px] bg-ink"/>}
                   </NavLink>
                 )
              })}
            </nav>
          </div>
          <Link to="/create" className="inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium h-10 px-6 bg-primary text-on-primary hover:bg-primary-active transition-colors">
             <Plus className="mr-2 h-4 w-4" /> Share a Feeling
          </Link>
        </div>
      </header>
      <main className="container-full py-8 md:py-12">
        {children}
      </main>
    </div>
  );
}