import { useNavigate } from 'react-router-dom';

/**
 * État vide — affiché quand aucune plateforme n'est configurée.
 * Props :
 *   icon     — emoji ou caractère affiché en grand (défaut : '🏦')
 *   title    — titre du message (défaut : 'Aucune plateforme configurée')
 *   message  — texte explicatif (défaut : message générique plateformes)
 *   cta      — libellé du bouton (défaut : 'Configurer mes plateformes')
 *   to       — route cible du bouton (défaut : '/settings?section=plateformes')
 */
export default function EmptyState({
  icon = '🏦',
  title = 'Aucune plateforme configurée',
  message = "Vous n'avez pas encore configuré de plateforme de crowdfunding sur votre compte. Associez au moins une plateforme pour commencer à suivre vos investissements.",
  cta = 'Configurer mes plateformes',
  to = '/settings?section=plateformes',
}) {
  const navigate = useNavigate();

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '72px 24px',
      textAlign: 'center',
      gap: 16,
    }}>
      <div style={{ fontSize: 56, lineHeight: 1 }}>{icon}</div>
      <h2 style={{
        margin: 0,
        fontSize: '1.35rem',
        fontWeight: 700,
        color: 'var(--text)',
      }}>
        {title}
      </h2>
      <p style={{
        margin: 0,
        maxWidth: 480,
        color: 'var(--text-muted)',
        lineHeight: 1.6,
        fontSize: '0.97rem',
      }}>
        {message}
      </p>
      <button
        onClick={() => navigate(to)}
        style={{
          marginTop: 8,
          padding: '10px 24px',
          background: 'var(--primary)',
          color: '#fff',
          border: 'none',
          borderRadius: 8,
          fontSize: '0.95rem',
          fontWeight: 600,
          cursor: 'pointer',
        }}
      >
        {cta}
      </button>
    </div>
  );
}
