import { Link, useLocation } from 'react-router-dom'
import { useAuth } from '../api'
import './Sidebar.css'

export default function Sidebar({ onLogout }) {
  const { user } = useAuth()
  const location = useLocation()

  return (
    <aside className="sidebar">
      <div className="sidebar-header">
        <h3>Casino Crawler</h3>
      </div>

      <nav className="sidebar-nav">
          <Link to="/" className={`nav-link ${location.pathname === '/' || location.pathname.startsWith('/crawl') ? 'active' : ''}`}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <rect x="3" y="3" width="7" height="7" />
              <rect x="14" y="3" width="7" height="7" />
              <rect x="3" y="14" width="7" height="7" />
              <rect x="14" y="14" width="7" height="7" />
            </svg>
            Dashboard
          </Link>
          <Link to="/report" className={`nav-link ${location.pathname === '/report' ? 'active' : ''}`}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
              <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
            </svg>
            Casino Report
          </Link>
      </nav>

      <div className="sidebar-footer">
        <div className="user-info">
          <span className="user-avatar">{user?.username?.charAt(0).toUpperCase()}</span>
          <span className="username">{user?.username}</span>
        </div>
        <button onClick={onLogout} className="logout-button">
          Sign Out
        </button>
      </div>
    </aside>
  )
}
