import { useCardSkin } from '../lib/cardSkin';

/** Small header button that flips the deck between the classic vector cards and
 *  the illustrated "sedmové" art. Persists via the cardSkin store. */
export default function CardSkinToggle({ className = '' }: { className?: string }) {
  const skin = useCardSkin((s) => s.skin);
  const toggle = useCardSkin((s) => s.toggle);
  const illustrated = skin === 'illustrated';

  return (
    <button
      onClick={toggle}
      title="Prepnúť vzhľad kariet"
      aria-label="Prepnúť vzhľad kariet"
      aria-pressed={illustrated}
      className={`text-[13px] whitespace-nowrap transition-colors ${
        illustrated ? 'text-gold hover:text-gold-bright' : 'text-[#7a7058] hover:text-gold'
      } ${className}`}
    >
      {illustrated ? '🂠 Sedmové' : '🂠 Klasické'}
    </button>
  );
}
