import { MemoryRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import ProductDetail from './ProductDetail';

export default function App() {
  const linkStyle = { color: '#2563eb', textDecoration: 'underline', fontWeight: 'bold' };

  return (
    // 실습 환경(iframe)에서는 BrowserRouter 대신 MemoryRouter를 사용합니다.
    <Router>
      <nav style={{ padding: '1rem', background: '#f1f5f9', display: 'flex', gap: '1.5rem', borderRadius: '8px', border: '1px solid #e2e8f0' }}>
        {/* a 태그 대신 Link 컴포넌트 사용 */}
        <Link to="/" style={linkStyle}>홈</Link>
        <Link to="/product/123" style={linkStyle}>123번 상품보기</Link>
        <Link to="/product/999" style={linkStyle}>999번 상품보기</Link>
      </nav>

      <div style={{ padding: '2rem' }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/product/:id" element={<ProductDetail />} />
          <Route path="*" element={<h2>404 Not Found</h2>} />
        </Routes>
      </div>
    </Router>
  );
}