import React, { useState } from 'react';

const CoverArtModal = ({ images, onSelect, onClose }) => {
    const [selected, setSelected] = useState(null);

    if (!images || images.length === 0) return null;

    return (
        <div className="ms-modal-overlay" onClick={onClose}>
            <div className="ms-modal" onClick={(e) => e.stopPropagation()}>
                <div className="ms-modal__header">
                    <h3 className="ms-modal__title">Cover Art 선택</h3>
                    <button type="button" className="ms-modal__close" onClick={onClose}>✕</button>
                </div>
                <div className="ms-cover-grid">
                    {images.map((url, idx) => (
                        <button
                            key={idx}
                            type="button"
                            className={`ms-cover-option ${selected === idx ? 'is-selected' : ''}`}
                            onClick={() => setSelected(idx)}
                        >
                            <img src={url} alt={`Cover option ${idx + 1}`} className="ms-cover-option__img" />
                            <span className="ms-cover-option__label">Option {idx + 1}</span>
                        </button>
                    ))}
                </div>
                <div className="ms-modal__actions">
                    <button type="button" className="ms-btn ms-btn--accent" disabled={selected === null}
                        onClick={() => { if (selected !== null) onSelect(images[selected]); }}>
                        이 이미지 사용
                    </button>
                    <button type="button" className="ms-btn ms-btn--ghost" onClick={onClose}>취소</button>
                </div>
            </div>
        </div>
    );
};

export default CoverArtModal;