'use client';

import { Disclosure } from '@/components/ui';

interface WeatherInfoPanelProps {
  className?: string;
}

export function WeatherInfoPanel({ className = 'mb-6' }: WeatherInfoPanelProps) {
  return (
    <Disclosure icon="ℹ️" title="Les 4 axes de la météo personnelle" className={className}>
      <div className="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-4">
        <div>
          <p className="mb-0.5 text-xs font-medium text-foreground">☀️ Performance</p>
          <p className="text-xs leading-relaxed text-muted">
            Votre performance personnelle et l&apos;atteinte de vos objectifs
          </p>
        </div>
        <div>
          <p className="mb-0.5 text-xs font-medium text-foreground">😊 Moral</p>
          <p className="text-xs leading-relaxed text-muted">
            Votre moral actuel et votre ressenti
          </p>
        </div>
        <div>
          <p className="mb-0.5 text-xs font-medium text-foreground">🌊 Flux</p>
          <p className="text-xs leading-relaxed text-muted">
            Votre flux de travail personnel et les blocages éventuels
          </p>
        </div>
        <div>
          <p className="mb-0.5 text-xs font-medium text-foreground">💎 Création de valeur</p>
          <p className="text-xs leading-relaxed text-muted">
            Votre création de valeur et votre apport
          </p>
        </div>
      </div>
    </Disclosure>
  );
}