import { useState } from 'react';
import { SessionList } from '../components/history/SessionList';
import { ExerciseChart } from '../components/history/ExerciseChart';

type Tab = 'history' | 'stats';

export function HistoryPage() {
  const [activeTab, setActiveTab] = useState<Tab>('history');

  return (
    <div className="space-y-4">
      <h1 className="text-2xl font-bold text-gray-100">Historie</h1>

      {/* Tab Toggle */}
      <div className="flex bg-gray-900 rounded-lg p-1">
        <button
          onClick={() => setActiveTab('history')}
          className={`flex-1 py-2 rounded-md text-sm font-medium min-h-[44px] transition-colors ${
            activeTab === 'history'
              ? 'bg-blue-600 text-white'
              : 'text-gray-400 hover:text-gray-200'
          }`}
        >
          Trainings
        </button>
        <button
          onClick={() => setActiveTab('stats')}
          className={`flex-1 py-2 rounded-md text-sm font-medium min-h-[44px] transition-colors ${
            activeTab === 'stats'
              ? 'bg-blue-600 text-white'
              : 'text-gray-400 hover:text-gray-200'
          }`}
        >
          Statistiken
        </button>
      </div>

      {activeTab === 'history' ? <SessionList /> : <ExerciseChart />}
    </div>
  );
}
