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

// Tek bir ulus kartı — renk, ikon, açıklama
export default function NationCard({ nation, index, onSelect, selected, locked = false, extra }) {
  const navigate = useNavigate();
  const handleClick = () => {
    if (onSelect) onSelect(nation);
    else navigate('/nations');
  };

  return (
    <button
      className={`nation-card glass glass-hover ${selected ? 'selected' : ''}`}
      style={{
        ['--nation-color']: nation.color,
        ['--nation-dark']: nation.dark,
        ['--nation-grad']: nation.gradient,
        animationDelay: `${index * 0.08}s`,
      }}
      onClick={handleClick}
    >
      <div className="nation-card-glow" />
      <div className="nation-card-icon">{nation.icon}</div>
      <h3 className="nation-card-name">{nation.name}</h3>
      <div className="nation-card-sub">{nation.subtitle}</div>
      <p className="nation-card-desc small">{nation.description}</p>
      {extra && <div className="nation-card-extra">{extra}</div>}
      <div className="nation-card-cta">
        {locked ? (
          <span className="chip">Ulus değiştirilemez</span>
        ) : selected ? (
          <span className="chip">Seçili Ulus ✓</span>
        ) : (
          <span className="btn btn-sm btn-ghost-gold">Ulusunu Seç</span>
        )}
      </div>
    </button>
  );
}