import { BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
import { Home, Users, Activity, Heart, FlaskConical } from 'lucide-react'
import Dashboard from './pages/Dashboard'
import DogList from './pages/DogList'
import DogDetail from './pages/DogDetail'
import PedigreeView from './pages/PedigreeView'
import LitterList from './pages/LitterList'
import LitterDetail from './pages/LitterDetail'
import BreedingCalendar from './pages/BreedingCalendar'
import PairingSimulator from './pages/PairingSimulator'
import './App.css'

function App() {
  return (
    <Router>
      <div className="app">
        <nav className="navbar">
          <div className="container">
            <div className="nav-brand">
              <img
                src="/static/br-logo.png"
                alt="BREEDR Logo"
                className="brand-logo"
              />
              <span className="brand-text">BREEDR</span>
            </div>
            <div className="nav-links">
              <Link to="/" className="nav-link">
                <Home size={20} />
                <span>Dashboard</span>
              </Link>
              <Link to="/dogs" className="nav-link">
                <Users size={20} />
                <span>Dogs</span>
              </Link>
              <Link to="/litters" className="nav-link">
                <Activity size={20} />
                <span>Litters</span>
              </Link>
              <Link to="/breeding" className="nav-link">
                <Heart size={20} />
                <span>Breeding</span>
              </Link>
              <Link to="/pairing" className="nav-link">
                <FlaskConical size={20} />
                <span>Pairing</span>
              </Link>
            </div>
          </div>
        </nav>

        <main className="main-content">
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/dogs" element={<DogList />} />
            <Route path="/dogs/:id" element={<DogDetail />} />
            <Route path="/pedigree/:id" element={<PedigreeView />} />
            <Route path="/litters" element={<LitterList />} />
            <Route path="/litters/:id" element={<LitterDetail />} />
            <Route path="/breeding" element={<BreedingCalendar />} />
            <Route path="/pairing" element={<PairingSimulator />} />
          </Routes>
        </main>
      </div>
    </Router>
  )
}

export default App