import { Modal, Button } from './ui';

export default function CardDetailDeckModal({
  isOpen,
  card,
  decks,
  selectedDeck,
  onSelectedDeckChange,
  onAdd,
  onClose,
}) {
  if (!card) return null;

  return (
    <Modal open={isOpen} onClose={onClose} title="Add to Deck" size="md">
      <div className="mb-6">
        <label
          className="block text-sm font-medium mb-2"
          style={{ color: 'var(--text-primary)' }}
          htmlFor="card-detail-deck-select"
        >
          Select Deck
        </label>
        <select
          id="card-detail-deck-select"
          value={selectedDeck}
          onChange={(e) => onSelectedDeckChange(e.target.value)}
          className="w-full p-3 rounded-xl border transition-all"
          style={{
            backgroundColor: 'var(--bg-secondary)',
            borderColor: 'var(--border)',
            color: 'var(--text-primary)',
            transitionDuration: 'var(--motion-duration-default)',
            transitionTimingFunction: 'var(--motion-ease-out)',
          }}
        >
          <option value="">Choose a deck...</option>
          {decks
            .filter((deck) => deck.game === card.game)
            .map((deck) => (
              <option key={deck.id} value={deck.id}>
                {deck.name}
              </option>
            ))}
        </select>
      </div>
      <div className="flex gap-3">
        <Button
          variant="primary"
          onClick={onAdd}
          disabled={!selectedDeck}
          className="flex-1"
        >
          Add to Deck
        </Button>
        <Button variant="secondary" onClick={onClose} className="flex-1">
          Cancel
        </Button>
      </div>
    </Modal>
  );
}