import { useAuth } from '../auth/AuthContext';
import { WeatherWidget } from '../components/WeatherWidget';
import { EventCountdownTiles } from '../components/EventCountdownTiles';
import styles from './DashboardPage.module.css';

export function DashboardPage() {
  const { user } = useAuth();

  return (
    <div>
      {/* Header: Titel links, Wetter rechts */}
      <div className={styles.header}>
        <h1 className={styles.title}>
          Willkommen, {user?.firstName} {user?.lastName}
        </h1>
        <WeatherWidget city={user?.city} />
      </div>

      {/* Messe-Countdown-Kacheln */}
      <EventCountdownTiles />

      <div style={{
        background: 'var(--color-bg-card)',
        borderRadius: 'var(--radius-md)',
        padding: '1.5rem',
        boxShadow: 'var(--shadow-sm)',
        border: '1px solid var(--color-border)',
      }}>
        <p style={{ color: 'var(--color-text-secondary)' }}>
          INSIGHT Platform - Sprint 1 Alpha
        </p>
        <p style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem', marginTop: '0.5rem' }}>
          Rolle: {user?.role}
        </p>
      </div>
    </div>
  );
}
