import { ReactNode } from 'react';
import { Link, useLocation } from 'react-router-dom';
import './Layout.css';

interface LayoutProps {
  children: ReactNode;
}

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

  return (
    <div className="layout">
      <header className="header">
        <div className="container header-content">
          <Link to="/" className="logo">
            <div className="logo-icon">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                {/* Three fruit trees representing an orchard */}
                {/* Left tree - rounded canopy */}
                <path d="M6 14 Q6 8 3 8 Q6 4 6 4 Q6 4 9 8 Q6 8 6 14" fill="currentColor" opacity="0.6"/>
                <rect x="5.25" y="13" width="1.5" height="4" fill="currentColor" opacity="0.6"/>
                {/* Center tree - larger rounded canopy */}
                <path d="M12 12 Q12 5 8 5 Q12 1 12 1 Q12 1 16 5 Q12 5 12 12" fill="currentColor"/>
                <rect x="11.25" y="11" width="1.5" height="5" fill="currentColor"/>
                {/* Right tree - rounded canopy */}
                <path d="M18 14 Q18 8 15 8 Q18 4 18 4 Q18 4 21 8 Q18 8 18 14" fill="currentColor" opacity="0.6"/>
                <rect x="17.25" y="13" width="1.5" height="4" fill="currentColor" opacity="0.6"/>
                {/* Ground */}
                <ellipse cx="12" cy="19" rx="9" ry="1.5" fill="currentColor" opacity="0.3"/>
              </svg>
            </div>
            <span className="logo-text">Orchard</span>
          </Link>
          <nav className="nav">
            <Link to="/" className={location.pathname === '/' ? 'active' : ''}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                <polyline points="9,22 9,12 15,12 15,22"/>
              </svg>
              Projects
            </Link>
            <a href="/docs" className="nav-link-muted">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14,2 14,8 20,8"/>
                <line x1="16" y1="13" x2="8" y2="13"/>
                <line x1="16" y1="17" x2="8" y2="17"/>
              </svg>
              Docs
            </a>
          </nav>
        </div>
      </header>
      <main className="main">
        <div className="container">
          {children}
        </div>
      </main>
      <footer className="footer">
        <div className="container footer-content">
          <div className="footer-brand">
            <span className="footer-logo">Orchard</span>
            <span className="footer-tagline">Content-Addressable Storage</span>
          </div>
          <div className="footer-links">
            <a href="/docs">Documentation</a>
            <a href="/api/v1">API</a>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default Layout;