import { collectionDisplayName } from '../lib/collection-vocabulary.js';
import { Modal } from './ui';

export default function CollectionDeleteModal({
  isOpen,
  collection,
  onClose,
  onConfirm,
}) {
  if (!collection) return null;

  return (
    <Modal
      open={isOpen}
      onClose={onClose}
      title="Delete List"
      size="md"
    >
      <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
        Are you sure you want to delete &quot;{collectionDisplayName(collection)}&quot;? This action
        cannot be undone and will permanently remove all cards and data associated with this list.
      </p>
      <div className="flex space-x-3">
        <button
          type="button"
          onClick={onClose}
          className="flex-1 py-2 px-4 rounded-xl border transition-colors"
          style={{
            borderColor: 'var(--border)',
            color: 'var(--text-secondary)',
          }}
        >
          Cancel
        </button>
        <button
          type="button"
          onClick={onConfirm}
          className="flex-1 py-2 px-4 rounded-xl font-medium transition-all duration-200 hover:shadow-md bg-red-600 text-white hover:bg-red-700"
        >
          Delete List
        </button>
      </div>
    </Modal>
  );
}