'use client';

import { useState } from 'react';

export function WeatherInfoPanel() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="mb-6 rounded-lg border border-border bg-card-hover">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between px-4 py-2.5 text-left transition-colors hover:bg-card"
      >
        <h3 className="text-sm font-semibold text-foreground">Les 4 axes de la météo personnelle</h3>
        <svg
          className={`h-4 w-4 text-muted transition-transform ${isOpen ? 'rotate-180' : ''}`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      {isOpen && (
        <div className="border-t border-border px-4 py-3">
          <div className="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-4">
            <div>
              <p className="text-xs font-medium text-foreground mb-0.5">☀️ Performance</p>
              <p className="text-xs text-muted leading-relaxed">
                Votre performance personnelle et l&apos;atteinte de vos objectifs
              </p>
            </div>
            <div>
              <p className="text-xs font-medium text-foreground mb-0.5">😊 Moral</p>
              <p className="text-xs text-muted leading-relaxed">
                Votre moral actuel et votre ressenti
              </p>
            </div>
            <div>
              <p className="text-xs font-medium text-foreground mb-0.5">🌊 Flux</p>
              <p className="text-xs text-muted leading-relaxed">
                Votre flux de travail personnel et les blocages éventuels
              </p>
            </div>
            <div>
              <p className="text-xs font-medium text-foreground mb-0.5">💎 Création de valeur</p>
              <p className="text-xs text-muted leading-relaxed">
                Votre création de valeur et votre apport
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}