import { useState } from 'react';
import ScheduleView from './components/ScheduleView.jsx';
import CarManagement from './components/CarManagement.jsx';
import styles from './App.module.css';

export default function App() {
  const [page, setPage] = useState('schedule');

  return (
    <div className={styles.app}>
      <header className={styles.header}>
        <h1 className={styles.title}>🚗 代車スケジュール管理</h1>
        <nav className={styles.nav}>
          <button
            className={`${styles.navBtn} ${page === 'schedule' ? styles.active : ''}`}
            onClick={() => setPage('schedule')}
          >
            📅 スケジュール
          </button>
          <button
            className={`${styles.navBtn} ${page === 'cars' ? styles.active : ''}`}
            onClick={() => setPage('cars')}
          >
            🚙 代車管理
          </button>
        </nav>
      </header>
      <main className={styles.main}>
        {page === 'schedule' ? <ScheduleView /> : <CarManagement />}
      </main>
    </div>
  );
}