export default function CollectionEditModal({
  isOpen,
  editForm,
  setEditForm,
  onClose,
  onSave,
}) {
  if (!isOpen) {
    return null;
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="card max-w-md w-full mx-4">
        <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
          Edit List
        </h2>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
              List Name
            </label>
            <input
              type="text"
              className="input-field w-full"
              value={editForm.name}
              onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
              placeholder="Enter list name"
            />
          </div>
          <div>
            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
              Description
            </label>
            <textarea
              className="input-field w-full"
              rows="3"
              value={editForm.description}
              onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
              placeholder="Describe your list"
            />
          </div>
          <div>
            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
              Hero Image (Optional)
            </label>
            <input
              type="url"
              className="input-field w-full"
              value={editForm.image}
              onChange={(e) => setEditForm({ ...editForm, image: e.target.value })}
              placeholder="Enter image URL"
            />
          </div>
          <div
            className="flex items-center justify-between p-4 rounded-lg border"
            style={{ borderColor: 'var(--border)' }}
          >
            <div>
              <label className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
                Public List
              </label>
              <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
                Make this collection discoverable by other users
              </p>
            </div>
            <button
              type="button"
              onClick={() => setEditForm({ ...editForm, isPublic: !editForm.isPublic })}
              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                editForm.isPublic ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
              }`}
            >
              <span
                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                  editForm.isPublic ? 'translate-x-6' : 'translate-x-1'
                }`}
              />
            </button>
          </div>
        </div>
        <div className="flex space-x-3 mt-6">
          <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={onSave}
            disabled={!editForm.name.trim()}
            className="flex-1 py-2 px-4 rounded-xl font-medium transition-all duration-200 hover:shadow-md disabled:opacity-50"
            style={{
              backgroundColor: 'var(--accent-ember)',
              color: 'white',
            }}
          >
            Save Changes
          </button>
        </div>
      </div>
    </div>
  );
}