import React from 'react';

export default function TarotCard({
  card, reversed = false, size = 'md', faceDown = false,
  clickable = false, onClick, label,
}) {
  const sizeClass = size === 'sm' ? 'tarot-card--sm' : size === 'lg' ? 'tarot-card--lg' : 'tarot-card--md';

  const handleClick = (e) => {
    if (!clickable) return;
    onClick?.(card, e);
  };

  if (faceDown || !card) {
    return (
      <button
        type="button"
        className={`tarot-card tarot-card--back ${sizeClass} ${clickable ? 'is-clickable' : ''}`}
        onClick={handleClick}
        aria-label={label || '카드 뒷면'}
        disabled={!clickable}
      >
        <img src="/images/tarot/card_back.svg" alt="" draggable={false} />
      </button>
    );
  }

  const styleClass = reversed ? 'tarot-card--reversed' : '';
  const onImgError = (e) => { e.currentTarget.style.display = 'none'; };

  return (
    <button
      type="button"
      className={`tarot-card tarot-card--face ${sizeClass} ${styleClass} ${clickable ? 'is-clickable' : ''}`}
      onClick={handleClick}
      aria-label={`${card.name}${reversed ? ' 역방향' : ''}`}
      disabled={!clickable}
    >
      <div className="tarot-card__inner">
        <img src={card.image} alt="" onError={onImgError} draggable={false} />
        <div className="tarot-card__fallback">
          <div className="tarot-card__symbol">{card.arcana === 'major' ? '✦' : '◆'}</div>
          <div className="tarot-card__name">{card.name}</div>
          <div className="tarot-card__name-en">{card.nameEn}</div>
        </div>
      </div>
      {label && <div className="tarot-card__label">{label}</div>}
    </button>
  );
}
